目次
JavaScript におけるノードの操作は、追加、削除、変更、および確認 (取得) の 4 つのタイプに分けられます。
ステップ 1: 使用するすべての要素オブジェクトを取得します (ID、クラス、名前、およびタグを使用して取得できます)。
第二段階：イベント操作（クリックイベント、ダブルクリックイベント、マウス移動イベント、ムーブアウトイベントなど）
クリック イベントでは、JavaScript のコア コード、つまりノードの追加を行います。
JavaScript におけるノードの操作は、追加、削除、変更、および確認 (取得) の 4 つのタイプに分けられます。
今日は、JavaScript でのノードの作成と追加についてまとめます。
JavaScriptノード操作を使って簡単な掲示板を作ってみました！! !
ケースを直接使用して、次のことを学びます。
事例分析：入力ボックスにテキストを入力して追加ボタンをクリックし、入力したテキストをliタグに入れてulタグに追加します。
ケース効果:入力入力ボックス、 ボタン buttonおよびul li list を利用します。HTML レイアウトと JS スクリプトのみを使用します。
HTML レイアウト コード:
<body>
<input type="text" placeholder="请输入添加的水果名" id="fruits">
<button id="btn">添加</button>
<ul id="ul">
<li>苹果</li>
<li>香蕉</li>
<li>鸭梨</li>
</ul>
</body>注: JavaScript は後で要素を取得するために id を使用するため、事前に id 名を指定してください。
JavaScript コードの実装:
ステップ 1: 使用するすべての要素オブジェクトを取得します(ID、クラス、名前、およびタグを使用して取得できます)。
入力ボックスのテキストを使用する必要があるため、入力入力ボックスを取得します。
var fruits = document.getElementById("fruits");button クリックしたいボタンなので、ボタンボタンを取得します。
var btn = document.getElementById("btn");ul リストに新しい要素 li を挿入したいので、ul リストを取得します。
var ul = document.getElementById("ul");第二段階：イベント操作（クリックイベント、ダブルクリックイベント、マウス移動イベント、ムーブアウトイベントなど）
今回はマウスのクリックボタンを使いたいというイベントを使うので、取得したボタンにクリックイベントを追加します。
btn.onclick = function(){
//执行的语法
}3 番目のステップ: クリック イベントで実行される操作。
クリック イベントでは、JavaScript のコア コード、つまりノードの追加を行います。
1. li 要素ノードを作成します。
//语法：var 变量名 = document.createElement("创建的标签名")
var li = document.createElement("li");2. テキスト ノードを作成します (テキスト ノードの内容は入力ボックスの内容です)。
// 语法： var 变量名 = document.createTextNode("文本的内容")
var text = document.createTextNode(fruits.value);3. 作成したテキストの内容を、 作成したラベルに追加します。
// 语法：创建的元素节点 .appendChild (创建的文本节点)
li.appendChild(text);4. 作成した要素ノードを HTML の対応する位置に追加します。注: ここでは、作成した li 要素ノードを HTML タグ内の ul に追加します. ul と li は親子関係にあるため、appendChild を使用して追加する必要があります.
//语法： 父级标签 .appendChild(创建的子级标签)
ul.appendChild(li);ここでの ul は、最初のステップで ul タグを取得したため、そのまま使用できます。
最終的な効果は次のとおりです。