jQueryでのDOMノードの操作方法まとめ

この記事では、jQuery で DOM ノードを操作する完全な方法を主に紹介します。興味のある方は、ぜひ参考にしてください。jQuery で DOM ノードを操作する方法を学ぶのに役立ちます。

append(content | fn): 一致する各要素にコンテンツを追加します。

例: すべての段落にいくつかの HTML タグを追加します。

<p>I would like to say: </p>
$("p").append("<b>Hello</b>");
[ <p>I would like to say: <b>Hello</b></p> ]

appendTo(): このメソッドは、従来の $(A).append(B) 操作を逆にします。つまり、B を A に追加する代わりに、A を B に追加します

例: すべての段落を追加します。 ID 値が foo の要素。

<p>I would like to say: </p>
<p></p><p></p>
$("p").appendTo("p");
<p><p>I would like to say: </p></p>
<p><p>I would like to say: </p></p>

prepend(): 一致する各要素内のコンテンツを先頭に追加します

例: HTML マークアップ コードをすべての段落の先頭に追加します。

<p>I would like to say: </p>
$("p").prepend("<b>Hello</b>");
[ <p><b>Hello</b>I would like to say: </p> ]

prependTo(content):

一致するすべての要素を別の指定された要素セットの先頭に追加します。実際、このメソッドを使用すると、従来の $(A).prepend(B) 操作が逆になります。つまり、B を A の先頭に追加する代わりに、A を B の先頭に追加します。

例: すべての段落を ID 値 foo の要素に追加します。

<p>I would like to say: </p><p id="foo"></p>
$("p").prependTo("#foo");
<p id="foo"><p>I would like to say: </p></p>

after(): 一致する各要素の後にコンテンツを挿入します。挿入された要素と挿入された要素は、同じレベルの親子関係に属しません

例: すべての段落の後に HTML マークアップ コードを挿入します。

<p>I would like to say: </p>
$("p").after("<b>Hello</b>");
<p>I would like to say: </p><b>Hello</b>

before(): 一致する各要素の前にコンテンツを挿入します。

例: すべての段落の前に HTML マークアップ コードを挿入します

<p>I would like to say: </p>
$("p").before("<b>Hello</b>");
[ <b>Hello</b><p>I would like to say: </p> ]

insertAfter(): 一致するすべての要素を、指定された一連の要素の後に挿入します。実際、このメソッドを使用すると、従来の $(A).after(B) 操作が逆になります。つまり、A の後に B を挿入する代わりに、B の後に A が挿入されます

例: すべての段落を要素の後に 1 つの段落に挿入します。 $("#foo").after("p")

<p>I would like to say: </p><p id="foo">Hello</p>
$("p").insertAfter("#foo");
<p id="foo">Hello</p><p>I would like to say: </p>

insertBefore() と同じ: 一致するすべての要素を、別の指定された要素セットの前に挿入します。実際、このメソッドを使用すると、従来の $(A).before(B) 操作が逆になります。つまり、A の前に B を挿入する代わりに、A が B の前に挿入されます。

例: 要素の前にすべての段落を挿入します。 $("#foo").before("p") と同じです。

<p id="foo">Hello</p><p>I would like to say: </p>
$("p").insertBefore("#foo");
<p>I would like to say: </p><p id="foo">Hello</p>

wrap(): 一致するすべての要素を他の要素の構造化マークアップでラップします。

この種のラッピングは、元の文書の意味上の品質を損なうことなく、文書に追加の構造化マークアップを挿入する場合に最も役立ちます。この関数の原理は、提供された最初の要素 (提供された HTML マークアップ コードから動的に生成される) を調べ、そのコード構造内の最上位の祖先要素を見つけることです。この祖先要素はラッピング要素です。この関数は、HTML マークアップ コード内の要素にテキストが含まれている場合には使用できません。したがって、テキストを追加したい場合は、パッケージが完成した後に追加する必要があります。

例: ターゲット要素をラップするために使用される DOM 要素

<p class="container">
 <p class="inner">Hello</p>
 <p class="inner">Goodbye</p>
</p>
$('.inner').wrap(function() {
 return '<p class="&#39; + $(this).text() + &#39;" />';
});
<p class="container">
 <p class="Hello">
  <p class="inner">Hello</p>
 </p>
 <p class="Goodbye">
  <p class="inner">Goodbye</p>
 </p>
</p>

unwrap(): このメソッドは、要素の親要素を削除します。これにより、.wrap() メソッドの効果をすぐにキャンセルできます。一致する要素 (およびその兄弟) は、DOM 構造内の親要素を置き換えます。

例: 各段落を ID「content」の p で囲みます

<p>
  <p>Hello</p>
  <p>cruel</p>
  <p>World</p>
</p>
$("p").unwrap()
<p>Hello</p>
<p>cruel</p>
<p>World</p>

wrapAll(): 一致するすべての要素を 1 つの要素で囲みます

これは '.wrap()' とは異なり、「.wrap()」は一致する各要素を 1 回ラップします。この種のラッピングは、元の文書の意味上の品質を損なうことなく、文書に追加の構造化マークアップを挿入する場合に最も役立ちます。この関数の原理は、提供された最初の要素を調べて、コード構造内の最上位の祖先要素を見つけることです。この祖先要素はラッピング要素です。

例: 生成された p ですべての段落をラップする

$("p").wrapAll("<p></p>");

または

$("p").wrapAll(document.createElement("p"));

関連する推奨事項:

インスタンス共有 JQuery セレクター、DOM ノード操作の演習

DOM ノード内に挿入する一般的な方法

HTMLタグをDOMノードに解釈する説明

以上がjQueryでのDOMノードの操作方法まとめの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。