序文：
要素を作成するには2つの方法があります
1）文字列の形で作成する必要がある要素をスプライスします。親要素を見つけて、親要素のinnerhtmlを直接割り当てます。
2）ドキュメントオブジェクトと要素オブジェクトによって提供されたいくつかの関数を使用して、要素の動的な作成を実現します（要素を作成=>親要素を見つけます=>指定された位置に要素を挿入）
1。文字列スプライシングフォーム
より良い理解のために、アプリケーションシナリオを設定します。
下の図に示すように、数値のセットをランダムに生成し、このデータセットをバーチャートにレンダリングし、div [id = "container"]に配置します。
<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>'; // split str} document.getElementById（ 'container'）。innerhtml = str; } </script>2。ドキュメントと要素オブジェクトに付属するいくつかの関数を使用します
下の図に示すように、アプリケーションシナリオも設定します
入力に情報を取得し、右側のボタンに従って、下の赤い長方形の左または右に挿入します。
ソリューションは3つのステップに分かれています。
実装コード：
<div id = "div-input"> <入力タイプ= "text" id = "txt_input" value = "4"/> <input type = "button" id "leftinsert" value = "leftinsert"/> <入力タイプ= "ボタン" = "rightInsert" value = "rightinsert"/> </div> <div> div> span </span> </span>>>>> <span> 3 </span> </div> <scrip> window.onload = function（）{var inputvalue = document.getElementById（ 'txt_input'）。value; document.getElementById（ 'leftinsert'）。onclick = function（）{//左側の入力varスパン= document.createelement（ 'span'）; // 1。要素span.innerhtml = inputValue; var container = document.getElementById（ 'container'）; // 2。親要素のcontainer.intertbefore（span、container.childnodes [0]）を見つけます。 //左端に挿入} document.getElementById（ 'redintert'） // 1。要素span.innerhtml = inputValue; var container = document.getElementById（ 'container'）; // 2。親要素Container.AppendChild（SPAN）を見つけます。 // 3。最後に要素を追加}} </script>JSダイナミック作成要素[2つの方法]の上記の簡単な分析は、私があなたと共有するすべてのコンテンツです。参照を提供できることを願っています。wulin.comをもっとサポートできることを願っています。