JQuery の DOM 作成方法 nodes_jquery

この記事の例では、JQuery が DOM ノードを作成する方法について説明します。皆さんの参考に共有してください。具体的な分析は次のとおりです。

JQuery セレクターを使用してドキュメント内の特定の要素ノードを迅速かつ簡単に検索し、attr() メソッドを使用して要素のさまざまな属性の値を取得します。しかし、実際の DOM 操作はそれほど単純ではありません。 DOM 操作では、多くの場合、ブラウザーでのドキュメントの表示を変更し、人間とコンピューターのさまざまな対話の目的を達成するために、HTML コンテンツを動的に作成する必要があります。

HTML DOM 構造は次のとおりです:

<p class="nm_p" title="欢迎访问脚本之家" >欢迎访问脚本之家</p>
<ul class="nm_ul">
    <li title='PHP编程'>简单易懂的PHP编程</li>
    <li title='JavaScript编程'>简单易懂的JavaScript编程</li>
    <li title='JQuery编程'>简单易懂的JQuery编程</li>
</ul>

要素ノードの作成

たとえば、2 つの 25edfb22a4f469ecb59f1190150159c6 要素ノードを作成し、それらを ff6d136ddc5fdfeffaf53ff6ee95f185 要素ノードの子ノードとして DOM ノード ツリーに追加するとします。このタスクを完了するには 2 つの手順が必要です。

1. 2 つの新しい要素を作成します。
2. 2 つの新しい要素をドキュメントに挿入します。

最初のステップは、jQuery のファクトリー関数 $() を次の形式で使用して完了できます。

$(html);

$(html) メソッドは、受信した HTML マークアップ文字列に基づいて DOM オブジェクトを作成し、その DOM オブジェクトを jQuery オブジェクトにラップして返します。

最初に 2 つの 25edfb22a4f469ecb59f1190150159c6 要素を作成します。jQuery コードは次のとおりです:

var $li_1 = $("<li></li>"); // 创建第一个<li>元素
var $li_2 = $("<li></li>"); // 创建第二个<li>元素

次に、これら 2 つの新しい要素をドキュメントに挿入します。jQuery の append() などのメソッドを使用できます。 JQuery コードは次のとおりです:

var $parent = $(".nm_ul"); // 获取<ul>节点。<li>的父节点
$parent.append($li_1); // 添加到<ul>节点中，使之能在网页中显示
$parent.append($li_2); // 可以采取链式写法：$parent.append($li_1).append($li_2);

動的に作成された新しい要素ノードはドキュメントに自動的に追加されませんが、他の方法を使用してドキュメントに挿入する必要があります。個々の要素を作成するときは、終了タグと標準の XHTML 形式の使用に注意してください。たとえば、e388a4556c0f65e1904146cc1a846bee 要素を作成するには、$("a6f776b766579c28d02706af09482172") または $("e388a4556c0f65e1904146cc1a846bee94b3e26ee717c64999d7867364b1b4a3") を使用できますが、$("< ;p>") または大文字の $("

")。

テキストノードの作成

2 つの 25edfb22a4f469ecb59f1190150159c6 要素ノードが作成され、ドキュメントに挿入されました。このとき、作成した要素ノードにテキストコンテンツを追加する必要があります。

JQuery コードは次のとおりです:

var $li_1 = $("
新增节点：数据结构
"); // 创建第一个
元素
var $li_2 = $("
新增节点：设计模式
"); // 创建第二个
元素
var $parent = $(".nm_ul"); // 获取<ul>节点。<li>的父节点
$parent.append($li_1); // 添加到<ul>节点中，使之能在网页中显示
$parent.append($li_2); // 可以采取链式写法：$parent.append($li_1).append($li_2);

上記のコードに示すように、テキスト ノードの作成は、要素ノードの作成時にテキスト コンテンツを直接書き込み、append() などのメソッドを使用してドキュメントに追加します。

$(html) の HTML コードがどれほど複雑であっても、同じ方法で作成する必要があります。例: $("25edfb22a4f469ecb59f1190150159c6907fae80ddef53131f3292ee4f81644bこれはd1c6776b927dc33c5d9114750b586338a4b561c25d9afb9ac8dc4d70affff419a0d36329ec37a2cc24d42c7229b69747aee7959cc8dd4be16ef633321c03dac32複雑な組み合わせ5db79b134e9f6b82c0b36e0489ee08ed2867e861ba23559b572f230426ab14ea" );

属性ノードの作成

属性ノードの作成はテキスト ノードの作成と似ており、要素ノードの作成時にも直接作成されます。 JQuery コードは次のとおりです:

var $li_1 = $("<li title='新增节点：数据结构'>新增节点：数据结构</li>"); // 创建第一个<li>元素
var $li_2 = $("<li title='新增节点：设计模式'>新增节点：设计模式</li>"); // 创建第二个<li>元素
var $parent = $(".nm_ul"); // 获取<ul>节点。<li>的父节点
$parent.append($li_1); // 添加到<ul>节点中，使之能在网页中显示
$parent.append($li_2); // 可以采取链式写法：$parent.append($li_1).append($li_2);

ブラウザのソース コード ツールでコードを表示すると、最後の 2 つの

要素に「title」という名前の属性ノードがあることがわかります。このことから、作成した要素のテキストノードと属性ノードがWebページに追加されたことが判断できます。 jQuery を使用して HTML 要素を動的に作成することは、非常に簡単、便利、柔軟であることがわかります。

この記事が皆さんの jQuery プログラミングに役立つことを願っています。