So fügen Sie Bilder in JavaScript hinzu-js-Tutorial-php.cn

Heim

Web-Frontend

js-Tutorial

So fügen Sie Bilder in JavaScript hinzu

Jul 22, 2021 am 11:41 AM

javascript

Wenn Sie ein Bild mit JavaScript hinzufügen möchten, können Sie zuerst die Methode createElement() verwenden, um ein img-Element zu erstellen und den URL-Adresswert des Bildes dem src-Attribut des img-Elements zuzuweisen. Methode zum Hinzufügen des img-Elements zum angegebenen Dom-Objekt. Das ist es.

So fügen Sie Bilder in JavaScript hinzu

Die Betriebsumgebung dieses Tutorials: Windows 7-System, JavaScript-Version 1.8.5, Dell G3-Computer.

Wenn Sie ein Bild mit JavaScript hinzufügen möchten, können Sie zuerst die Methode createElement() verwenden, um ein img-Element zu erstellen und den URL-Adresswert des Bildes dem src-Attribut des img-Elements zuzuweisen. Methode zum Hinzufügen des img-Elements zum angegebenen dom-Objekt, fertig.

createElement()-Methode

createElement()-Methode erstellt ein Element durch Angabe eines 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

&lt;!DOCTYPE html&gt;
&lt;html&gt;
	&lt;head&gt;
		&lt;meta charset=&quot;utf-8&quot;&gt;
		&lt;script type=&quot;text/javascript&quot;&gt;
			window.onload = function() {
				var bigImg = document.createElement(&quot;img&quot;); //创建一个img元素

				bigImg.src = &quot;logo.png&quot;; //给img元素的src属性赋值
				//bigImg.width=&quot;320&quot;;  //320个像素 不用加px
				var myp = document.getElementById(&#39;myp&#39;); //获得dom对象
				myp.appendChild(bigImg); //为dom添加子元素img

			};
		&lt;/script&gt;
	&lt;/head&gt;
	&lt;body&gt;
		&lt;div id=&quot;myp&quot; style=&quot;border:1px solid #eee;width:320px;height:100px;&quot;&gt;&lt;/div&gt;
	&lt;/body&gt;

&lt;/html&gt;

Nach dem Login kopieren

[Empfohlenes Lernen: 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!

Erklärung dieser Website

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn