Zwei Möglichkeiten zum dynamischen Erstellen von Elementen in JS_javascript-Kenntnissen

In diesem Artikel werden zwei Methoden zum Erstellen von Elementen in js als Referenz beschrieben. Der spezifische Inhalt lautet wie folgt:

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 nach dem Zufallsprinzip eine Reihe von Zahlen, rendern Sie diese Daten in ein Balkendiagramm und platzieren Sie sie in 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 aus der Eingabe und fügen Sie sie entsprechend der Schaltfläche rechts unten links oder rechts in das rote Rechteck 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. Elemente 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>