JavaScriptで新しいノードを作成する方法は何ですか

醉折花枝作酒筹
リリース: 2021-07-16 11:08:26
オリジナル
4564 人が閲覧しました

メソッドは次のとおりです: 1. createElement()、要素ノードの作成; 2. createTextNode()、テキスト ノードの作成; 3. createComment()、コメント ノードの作成; 4. createDocumentFragment()、ドキュメント フラグメント ノードの作成。

JavaScriptで新しいノードを作成する方法は何ですか

このチュートリアルの動作環境: Windows7 システム、JavaScript バージョン 1.8.5、Dell G3 コンピューター。

(1)document.createElement(tagName)

createElement() は、要素ノード、つまり、nodeType=1 のノードを作成するために使用されます。このうち、tagNameはHTMLタグの名前であり、nodeオブジェクトが返されます。

(2)document.createTextNode(text)

createTextNode() は、テキスト ノード、つまり、nodeType=3 のノードを作成するために使用されます。このうちテキストはテキストノードの内容であり、ノードオブジェクトが返されます。

(3)document.createComment(comment)

createComment() は、コメント ノード、つまり、nodeType=8 のノードを作成するために使用されます。このうちcommentはコメントの内容であり、nodeオブジェクトが返されます。

(4)document.createDocumentFragment);

createDocumentFragment() は、ドキュメント フラグメント ノードを作成するために使用されます。ドキュメント フラグメント ノードは、複数の DOM ノードのコレクションであり、要素ノード、テキスト ノード、コメント ノードなど、さまざまなタイプのノードを含めることができます。ドキュメント フラグメント ノードは、最初に作成されたときは空であるため、ノードを追加する必要があります。

たとえば、次のように

タグを作成します:

wvarpp = document.createElement("div") //次のコードは

要素を作成するために使用されます。 :

var node=document.createTextNode("これは新しい段落です。")//テキスト ノードを

要素に追加します:

pp.appendChild(node); //テキスト ノードを < ;div>Yuansuzhong:

var element=document.getElementById("div1"); に追加します。 //最後に、p 要素を既存の要素に追加します。既存の要素の検索:

element.appendChild(pp); //既存の要素に追加

insertBefore() メソッドを使用: 新しい要素を開始位置に追加

<body>
<div id="div1">
<p id="p1">这是一个段落。 </p>
<pid="p2">这是另外一个段落。</p>
</div>
<script>
var pp = document.createElement("div") //以下代码是用于创建<div>元愫
var node=document.createTextNode("这是新段落。")://为 <div>元素添加文本节点
pp.appendChild(node); //将文本节点添加到<div>元素中
var element=document.getElementById("div1"); //最后,在-一个已存在的元素中添加div元素。查找已存在的元素:
element.appendChild(pp); //添加到已存在的元素中:
</script>
</body>
ログイン後にコピー

【推奨される学習: JavaScript 上級チュートリアル ]

以上がJavaScriptで新しいノードを作成する方法は何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート