So fügen Sie Bilder in Javascript hinzu-Front-End-Fragen und Antworten-php.cn

So fügen Sie Bilder in Javascript hinzu

藏色散人

Freigeben： 2021-06-26 14:05:06

Original

5938 Leute haben es durchsucht

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.

So fügen Sie Bilder in Javascript hinzu

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)

Nach dem Login kopieren

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)

Nach dem Login kopieren

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)

Nach dem Login kopieren

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(&#39;myp&#39;); //获得dom对象
myp.appendChild(bigImg); //为dom添加子元素img
};
</script>
</head>
<body>
<div id="myp" style="border:1px solid #eee;width:320px;height:100px;"></div>
</body>
</html>

Nach dem Login kopieren

[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!