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

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

WBOY
Libérer: 2016-05-16 15:04:30
original
1111 Les gens l'ont consulté

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>
Copier après la connexion

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()                                                                                 
Code d'implémentation :

<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>
Copier après la connexion
L'article ci-dessus analyse brièvement les éléments de création dynamique JS [deux méthodes] et tout le contenu partagé par l'éditeur. J'espère qu'il pourra vous donner une référence et j'espère que vous soutiendrez Script Home.
Étiquettes associées:
js
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal