Comment ajouter des images en JavaScript-js tutoriel-php.cn

Comment ajouter des images en JavaScript

醉折花枝作酒筹

Libérer： 2023-01-07 11:44:59

original

20324 Les gens l'ont consulté

Si vous souhaitez ajouter une image à l'aide de JavaScript, vous pouvez d'abord utiliser la méthode createElement() pour créer un élément img et attribuer la valeur de l'adresse URL de l'image à l'attribut src de l'élément img, puis utiliser appendChild() ; méthode pour ajouter l’élément img à l’objet dom spécifié.

Comment ajouter des images en JavaScript

L'environnement d'exploitation de ce tutoriel : système Windows 7, JavaScript version 1.8.5, ordinateur Dell G3.

Si vous souhaitez ajouter une image à l'aide de JavaScript, vous pouvez d'abord utiliser la méthode createElement() pour créer un élément img et attribuer la valeur de l'adresse URL de l'image à l'attribut src de l'élément img, puis utiliser appendChild() ; méthode pour ajouter l’élément img à l’objet dom spécifié, c’est tout.

Méthode createElement()

La méthode createElement() crée un élément en spécifiant un nom

Syntaxe :

document.createElement(nodename)

Copier après la connexion

Paramètres : nom de nœud : obligatoire. Créez le nom de l'élément.

Valeur de retour : nœud d'élément créé

Méthode getElementById()

La méthode getElementById() renvoie une référence au premier objet avec l'ID spécifié.

HTML DOM définit plusieurs méthodes pour rechercher des éléments, en plus de getElementById(), il existe également getElementsByName() et getElementsByTagName().

S'il n'y a aucun élément avec l'ID spécifié, renvoyez null

S'il y a plusieurs éléments avec l'ID spécifié, renvoyez undéfini.

Syntaxe : la méthode

document.getElementById(elementID)

Copier après la connexion

appendChild()

la méthode appendChild() ajoute un nouveau nœud enfant à la fin de la liste des nœuds enfants du nœud.

Astuce : Si newchild existe déjà dans l'arborescence des documents, il sera supprimé de l'arborescence des documents et réinséré dans sa nouvelle position. Si newchild est un nœud DocumentFragment, il ne sera pas inséré directement, mais ses nœuds enfants seront insérés dans l'ordre à la fin du tableau childNodes[] du nœud actuel.

Vous pouvez utiliser la méthode appendChild() pour supprimer un élément d'un autre élément.

Syntaxe :

node.appendChild(node)

Copier après la connexion

Paramètres : nœud : obligatoire. L'objet nœud que vous souhaitez ajouter.

Exemple : JavaScript pour ajouter des images aux éléments div

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

				bigImg.src = "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>

Copier après la connexion

[Apprentissage recommandé : Tutoriel avancé javascript]

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!