Une brève analyse de JS créant des éléments dynamiquement [deux méthodes]

Préface :

Il y a deux façons de créer des éléments

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. Trouver l'élément parent: il peut correspondre au sélecteur CSS spécifié via ID, nom, nom de balise, classe et
3. Insérer des éléments à l'emplacement spécifié: é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>

La brève analyse ci-dessus des éléments de création dynamique JS [deux méthodes] 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.