Une brève analyse de la création dynamique d'éléments JS [deux méthodes]_compétences javascript

Avant-propos :

Il existe deux manières de créer des éléments

1) Épissez les éléments qui doivent être créés sous forme de chaînes ; recherchez l'élément parent et attribuez directement une valeur au innerHTML de l'élément parent.

2) Utilisez certaines fonctions fournies avec les objets Document et Element pour créer dynamiquement des éléments (créer des éléments => rechercher des éléments parents => insérer des éléments à des positions spécifiées)

1. Formulaire de concaténation de chaînes

Pour une meilleure compréhension, définissez un scénario d'application.

Générez aléatoirement un ensemble de nombres, restituez cet ensemble de données dans un graphique à barres et placez-le dans un div[id="container"], comme indiqué ci-dessous

<div id="container">
 </div>
 <script>
   window.onload = function () {
     var str='';
     for(var i=0; i<30 ;i++){
       var r = parseInt(Math.random()*100); //随机生成一个数字
       str += '<div>'+r+'</div>'; //拼接str
     }
     document.getElementById('container').innerHTML=str;
   }
 </script>

2. Utilisez certaines fonctions fournies avec les objets Document et Element

Définissez également un scénario d'application, comme indiqué ci-dessous

Récupérez les informations dans l'entrée et insérez-les à gauche ou à droite du rectangle rouge ci-dessous en fonction du bouton de droite.

La solution se divise en trois étapes  :

1. Créer un élément : Document.createElement()
2. Trouver l'élément parent : vous pouvez utiliser l'identifiant, le nom, le nom de la balise, la classe et faire correspondre le sélecteur CSS spécifié
3. Insérer l'élément à la position spécifiée : element.appendChild(), element.insertBefore()                                                                                 

<div id="div-input">
  <input type="text" id="txt_input" value="4"/>
  <input type="button" id="leftInsert" value="左侧入" />
  <input type="button" id="rightInsert" value="右侧入" />
</div>
<div id="container">
  <span>1</span>
  <span>2</span>
  <span>3</span>
</div>
 <script>
   window.onload = function () {
     var inputValue= document.getElementById('txt_input').value;
     document.getElementById('leftInsert').onclick=function(){
       //左侧入
       var span = document.createElement('span'); //1、创建元素
       span.innerHTML=inputValue;
       var container = document.getElementById('container'); //2、找到父级元素
        container.insertBefore(span,container.childNodes[0]);//插入到最左边
     }
     document.getElementById('rightInsert').onclick=function(){
       //右侧入
       var span = document.createElement('span'); //1、创建元素
       span.innerHTML=inputValue;
       var container = document.getElementById('container'); //2、找到父级元素
       container.appendChild(span); //3、在末尾中添加元素
     }
   }
 </script>