Eine kurze Analyse der dynamischen Erstellung von JS-Elementen [zwei Methoden]_Javascript-Fähigkeiten

Vorwort:

Es gibt zwei Möglichkeiten, Elemente zu erstellen

1) Fügen Sie die zu erstellenden Elemente in Form von Zeichenfolgen zusammen. Suchen Sie das übergeordnete Element und weisen Sie dem innerHTML des übergeordneten Elements direkt einen Wert zu.

2) Verwenden Sie einige Funktionen, die mit Dokument- und Elementobjekten geliefert werden, um Elemente dynamisch zu erstellen (Elemente erstellen => übergeordnete Elemente finden => Elemente an angegebenen Positionen einfügen)

1. String-Verkettungsformular

Legen Sie zum besseren Verständnis ein Anwendungsszenario fest.

Generieren Sie zufällig eine Reihe von Zahlen, rendern Sie diese Datenmenge in ein Balkendiagramm und platzieren Sie sie in einem div[id="container"], wie unten gezeigt

<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. Verwenden Sie einige Funktionen, die mit Dokument- und Elementobjekten geliefert werden

Legen Sie außerdem ein Anwendungsszenario fest, wie unten gezeigt

Holen Sie sich die Informationen in der Eingabe und fügen Sie sie je nach der Schaltfläche rechts links oder rechts in das rote Rechteck unten ein.

Die Lösung gliedert sich in drei Schritte :

1. Element erstellen: Document.createElement()
2. Suchen Sie das übergeordnete Element: Sie können ID, Name, Tag-Name und Klasse verwenden und mit dem angegebenen CSS-Selektor übereinstimmen
3. Element an der angegebenen Position einfügen: 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>