この記事では、参照用の要素を作成する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つのステップに分かれています。
1。要素の作成：document.createelement（）
2。親要素を見つける：指定されたCSSセレクターをID、名前、ラベル名、クラスを介して一致させ、指定されたCSSセレクターを一致させることができます
3.指定された位置に要素を挿入：element.appendChild（）、element.insertbefore（）
実装コード：
<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>上記はこの記事に関するものです。すべての人の学習に役立つことを願っています。