So fügen Sie ein Bild mit JavaScript hinzu: Verwenden Sie zunächst die Methode createElement(), um ein img-Element zu erstellen. Weisen Sie dann den URL-Adresswert des Bildes dem src-Attribut des img-Elements zu das img-Element zum angegebenen Dom-Objekt.
Die Betriebsumgebung dieses Artikels: Windows 7-System, JavaScript-Version 1.8.5, Dell G3-Computer.
Wie füge ich Bilder mit Javascript hinzu?
createElement()-Methode
createElement()-Methode erstellt ein Element durch Angabe des Namens
Syntax:
document.createElement(nodename)
Parameter: Knotenname: erforderlich. Erstellen Sie den Namen des Elements.
Rückgabewert: Erstellter Elementknoten
getElementById()-Methode
getElementById()-Methode gibt eine Referenz auf das erste Objekt mit der angegebenen ID zurück.
HTML DOM definiert mehrere Methoden zum Suchen von Elementen. Zusätzlich zu getElementById() gibt es auch getElementsByName() und getElementsByTagName().
Wenn es kein Element mit der angegebenen ID gibt, geben Sie null zurück.
Wenn es mehrere Elemente mit der angegebenen ID gibt, geben Sie undefiniert zurück.
Syntax:
document.getElementById(elementID)
appendChild()-Methode
appendChild()-Methode fügt einen neuen untergeordneten Knoten am Ende der untergeordneten Knotenliste des Knotens hinzu.
Tipp: Wenn newchild bereits im Dokumentenbaum vorhanden ist, wird es aus dem Dokumentenbaum entfernt und an seiner neuen Position wieder eingefügt. Wenn newchild ein DocumentFragment-Knoten ist, wird er nicht direkt eingefügt, sondern seine untergeordneten Knoten werden der Reihe nach am Ende des childNodes[]-Arrays des aktuellen Knotens eingefügt.
Sie können die Methode appendChild() verwenden, um ein Element in ein anderes Element zu entfernen.
Syntax:
node.appendChild(node)
Parameter: Knoten: erforderlich. Das Knotenobjekt, das Sie hinzufügen möchten.
Beispiel: JavaScript zum Hinzufügen von Bildern zu div-Elementen
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript">
window.onload = function() {
var bigImg = document.createElement("img"); //创建一个img元素
bigImg.src = "https://www.html.cn/static/images/logo.png"; //给img元素的src属性赋值
//bigImg.width="320"; //320个像素 不用加px
var myp = document.getElementById('myp'); //获得dom对象
myp.appendChild(bigImg); //为dom添加子元素img
};
</script>
</head>
<body>
<div id="myp" style="border:1px solid #eee;width:320px;height:100px;"></div>
</body>
</html>[Empfohlen: Javascript-Tutorial für Fortgeschrittene]
Das obige ist der detaillierte Inhalt vonSo fügen Sie Bilder in Javascript hinzu. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
