Attribuez une chaîne de balises HTML à une variable JavaScript. En plus des doubles guillemets échappés de la valeur d'attribut, la chaîne est encore très longue et semble un peu compliquée à un moment donné. Si vous ajoutez des éléments dynamiquement avec JS, il n'y aura pas de cordes aussi complexes et le code est plus lisible et facile à comprendre.
Les pages Web sont composées de tags HTML Layer par couche, et JS peut également ajouter dynamiquement des couches de balises telles que Div, Li et IMG. En fait, peu importe la balise HTML, la méthode de création dynamique de JS est similaire. Commencez ensuite par ajouter des divs dynamiquement.
1. Ajouter des éléments Div dynamiquement dans JS
<div id = "parent"> </ div> fonction addElementDiv (obj) {var parent = document.getElementById (obj); // ajouter div var div = document.CreateElement ("div"); // Définit l'attribut div, tel que id div.setAttribute ("id", "newDiv"); div.innerhtml = "js ajouter dynamiquement div"; Parent.ApendChild (Div); }Appel: AddElementDiv ("parent");
2. Ajouter Li dynamiquement à JS
<ul id = "parentul"> <li> li </li> </ul> fonction addElementLi (obj) {var ul = document.getElementById (obj); // ajouter li var li = document.CreateElement ("li"); // Définissez l'attribut Li, tel que id li.setAttribute ("id", "newli"); li.innerhtml = "js ajouter dynamiquement li"; ul.APPEndChild (li); }Appel: AddElementLi ("parentul");
3. Ajouter des éléments IMG dynamiquement dans JS
<ul id = "parentul"> </ul> fonction addElementMg (obj) {var ul = document.getElementById (obj); // ajouter li var li = document.CreateElement ("li"); // ajouter img var img = document.createElement ("img"); // Définissez l'attribut IMG, tel que id img.setAttribute ("id", "newImg"); // Définissez l'adresse d'image IMG img.src = "/images/prod.jpg"; Li.ApendChild (IMG); ul.APPEndChild (li); }Appel: AddElementeMg ("parentul");
L'article ci-dessus sur JS ajoutant dynamiquement des éléments (Div, Li, IMG, etc.) et les attributs de définition est tout le contenu que je partage avec vous. J'espère que vous pourrez vous faire référence et j'espère que vous pourrez soutenir Wulin.com plus.