Comment ajouter dynamiquement des éléments (div, li, img, etc.) et définir des attributs dans js

Attribuez une chaîne de balises html à une variable javascript. En plus de la valeur de l'attribut à l'aide de guillemets doubles échappés, la chaîne est parfois très longue et semble un peu compliquée. Si vous utilisez js pour ajouter dynamiquement des éléments, il n'y aura pas de chaînes aussi compliquées et le code sera plus lisible et plus facile à comprendre.

Les pages Web sont composées de couches de balises html, et js peut également ajouter dynamiquement des couches de balises telles que div, li et img. En fait, quelle que soit la balise html dont il s'agit, la méthode de création dynamique avec js est la même. Ensuite, nous commençons par ajouter dynamiquement div.

1. js ajoute dynamiquement un élément div

<div id="parent"></div>
 
　　function addElementDiv(obj) {
　　　　var parent = document.getElementById(obj);
 
　　　　//添加 div
　　　　var div = document.createElement("div");
 
　　　　//设置 div 属性，如 id
　　　　div.setAttribute("id", "newDiv");
 
　　　　div.innerHTML = "js 动态添加div";
　　　　parent.appendChild(div);
　　}

Appel : addElementDiv("parent");

2 , js ajoute dynamiquement li

<ul id="parentUl"><li>原li</li></ul>
 
　　function addElementLi(obj) {
　　　　var ul = document.getElementById(obj);
 
　　　　//添加 li
　　　　var li = document.createElement("li");
 
　　　　//设置 li 属性，如 id
　　　　li.setAttribute("id", "newli");
 
　　　　li.innerHTML = "js 动态添加li";
　　　　ul.appendChild(li);
　　}

Appel : addElementLi("parentUl");

3. js ajoute dynamiquement un élément img

<ul id="parentUl"></ul>
 
　　function addElementImg(obj) {
　　　　var ul = document.getElementById(obj);
 
　　　　//添加 li
　　　　var li = document.createElement("li");
 
　　　　//添加 img
　　　　var img = document.createElement("img");
 
　　　　//设置 img 属性，如 id
　　　　img.setAttribute("id", "newImg");
 
　　　　//设置 img 图片地址
　　　　img.src = "/images/prod.jpg";
 
　　　　li.appendChild(img);
　　　　ul.appendChild(li);
　　}

Appel : addElementImg("parentUl");

Le js ci-dessus ajoute dynamiquement des éléments (div, li, img, etc.) et La méthode de définition des propriétés est tout le contenu partagé par l'éditeur. J'espère qu'il pourra vous donner une référence, et j'espère également que vous prendrez en charge le site Web PHP chinois.

Pour plus de méthodes js permettant d'ajouter dynamiquement des éléments (div, li, img, etc.) et de définir des attributs, veuillez faire attention au site Web PHP chinois pour les articles connexes !