Cet article partage deux méthodes de création d'éléments pour votre référence. Le contenu spécifique est le suivant
1) épisser les éléments que vous devez créer sous la forme d'une chaîne; Recherchez l'élément parent et affectez directement l'InnerHTML de l'élément parent.
2) Utilisez certaines fonctions fournies par des objets de document et d'élément pour réaliser la création dynamique d'éléments (créer des éléments => trouver des éléments parents => Insérer des éléments en position spécifiée)
1. Formulaire d'épissage de chaîne
Pour une meilleure compréhension, définissez un scénario d'application.
Générez de manière aléatoire un ensemble de nombres, rendez cet ensemble de données dans un graphique à barres et placez-le dans div [id = "conteneur"], comme indiqué dans la figure ci-dessous
<div id = "Container"> </div> <script> window.onload = function () {var str = ''; pour (var i = 0; i <30; i ++) {var r = parseInt (math.random () * 100); // Random Générer un nombre str + = '<v>' + r + '</div>'; // Split Str} document.getElementById ('Container'). InnerHtml = Str; } </ script>2. Utilisez certaines fonctions fournies avec des objets de document et d'élément
Définissez également un scénario d'application, comme indiqué dans la figure ci-dessous
Obtenez les informations dans l'entrée et insérez-la à gauche ou à droite du rectangle rouge ci-dessous en fonction du bouton à droite.
La solution est divisée en trois étapes:
1. Créer un élément: document.CreateElement ()
2. Trouvez l'élément parent: vous pouvez faire correspondre le sélecteur CSS spécifié via l'ID, le nom, le nom de l'étiquette, la classe et correspondre au sélecteur CSS spécifié
3. Insérer des éléments à la position spécifiée: élément.ApendChild (), élément.insertbefore ()
Code d'implémentation:
<div id = "div-Input"> <input type = "text" id = "txt_input" value = "4" /> <input type = "Button" id = "LeftInsert" value = "LefTinsert" /> <input type = "Button" id = "RightInsert" value = "droite> <pander> <span> 3 </span> </div> <cript> window.onload = function () {var inputvalue = document.getElementById ('txt_input'). document.getElementById ('LeftInsert'). onClick = function () {// entrée var span sur le côté gauche = document.CreateElement ('span'); // 1. Créer des éléments Span.InnerHtml = InputValue; var conteneur = document.getElementById ('conteneur'); // 2. Recherchez l'élément parent Container.InsertBefore (Span, Container.ChildNodes [0]); // insérer sur le plus à gauche} document.getElementById ('RightInsert'). OnClick = function () {// Input var Span sur le côté droit = document.CreateElement ('Span'); // 1. Créer des éléments Span.InnerHtml = InputValue; var conteneur = document.getElementById ('conteneur'); // 2. Recherchez l'élément parent Container.ApendChild (SPAN); // 3. Ajouter un élément à la fin}} </cript>Ce qui précède concerne cet article, j'espère qu'il sera utile à l'apprentissage de tout le monde.