jQuery Academy · レッスン

jQueryによるDOM操作 - 2

「jQueryによるDOM操作 - 2」はCoddyKit上の無料jQuery Academyレッスンです。これはレッスン1/1です。下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。これはjQuery Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 jQuery Academyコースには全1レッスンが含まれています。

このレッスンの一部はまだ翻訳されておらず、英語で表示されています。

概要とappend

こんにちは。

これまでの例では、HTML DOMオブジェクトの更新や読み取りを行ってきました。

ここではappend()メソッドを使った挿入操作について学習します。

例を見てみましょう。

<button id="add">
     Add New Item
</button>		
<div id="target"></div>

<script>
  
/*
  Listen for an element with 
  the add id click
  */
  $('#add').click(function(){

  /*
  append '<p>This is the appended 
  text</p>' to #target element
  */
  $("#target").append("<p>Appended text</p>");
})
</script>

append

上記のコードを実行すると、appendメソッドは（引数として渡された）HTMLコードを#test要素の末尾に追加します。

prepend

prepend()メソッド

append()メソッドとは反対の働きをするのがprepend() メソッドです。append()メソッドは対象要素の内容の末尾に追加しますが、prependは先頭に追加します。

<div id="target"></div>

<button id="add">
     Add New Item
</button>		

<script>

/*
Listen for an element 
with the add id click
*/
$('#add').click(function(){

 /* append '<p>This is the prepended text</p>' 
    to #target element
*/
   $("#target").prepend("<p>This is the appended text</p>");
})

</script>

質問

appendメソッドとprependメソッドを使うと、対象要素の末尾と先頭に新しいHTML要素を追加できました。

では、対象要素の兄弟要素として追加したい場合はどうすればよいでしょうか。

例

先ほどの例を続けましょう。

最初のケースのHTMLノードは次のとおりです。

<div id="test">
     <p>initial paragraph</p>
</div>

after - beforeメソッド

after()メソッドとbefore()メソッド

after()メソッドとbefore()メソッドを使うと、対象要素の前後にHTML要素を追加できます。

以下の例では、#testというidを持つ要素の直前と直後に、兄弟要素として新しい要素を追加しています。

<div id="test">
     <p>initial paragraph</p>
</div>

<script>
$('#test').before('<p>I am before the #test element</p>');
$('#test').after('<p>I am after the #test element</p>');
</script>

複数の挿入

これまで、prepend()、append()、before()、after()メソッドについて見てきました。説明し忘れていたことがあります。申し訳ありません。ときどき忘れっぽいのです😇。

では、同時に複数のノードを追加したい場合はどうすればよいでしょうか。

以下の例のように、

関連するメソッドに複数の引数を渡すことで、同時に複数のノードを追加できます。

<p>
<span id="target"></span>
</p>
<script>
var firstNode = '<p id="first-node">First node</p>';
var secondNode = '<p id="first-node">Second node</p>';
var thirdNode = '<p id="first-node">Third node</p>';

/*
The following four methods work 
with the same logic and take 
more than one argument.
*/

 $('#target').before(firstNode, secondNode, thirdNode);
 $('#target').after(firstNode, secondNode, thirdNode);
 $('#target').append(firstNode, secondNode, thirdNode);
 $('#target').prepend(firstNode, secondNode, thirdNode);

</script>

チェーン記述の例

上の例では、同時に複数のノードを追加しています。異なるメソッドを使う場合でも、構文は同じであることがわかります。

また、JQueryの書き方を変えることで、コードを記述できます。

この方法なら、より短く効果的なコードを記述できます。

例を見て、jQueryでチェーン記述する方法を学びましょう。

<p id="test"></p>

<script>
var firstNode = '<p id="first-node">First node</p>';
var secondNode = '<p id="first-node">Second node</p>';
var thirdNode = '<p id="first-node">Third node</p>';

/*
We made our code shorter.
Also, we have done the select operation 
on the DOM only once instead of twice.
*/
$('#test').before(firstNode, secondNode, thirdNode)
	    .after(firstNode, secondNode, thirdNode);

</script>

wrapメソッド

wrap()メソッド

HTML要素を別のコンテナーに入れたい場合、どのメソッドを使えばよいでしょうか。

もちろん、wrap()メソッドを使います。

次の例では、wrapメソッドの簡単な使い方を示します。

<div id="target"></div>

<script>
/*
When we apply the code below. 
The node we assigned as an argument 
will come around our target element.
*/
$("#target").wrap('<div class="container">Container wrapped the target element</div>');

//The result will be as follows
/*
<div class="container">
  Container wrapper the target element
  <div id="target">
  </div>
</div>
*/
</script>

Question

unwrapメソッド

unwrap()メソッド

wrap()メソッドとは反対のメソッドもあります。unwrap()メソッドを使うと、対象要素の親要素を削除できます。

const $ = (selector) => ({
    unwrap: () => console.log(`Unwrapped ${selector}`)
});
$("#target").unwrap();

emptyメソッド

empty()メソッド

HTML要素を削除する方法を見てみましょう。

empty()メソッドを使うと、対象要素のすべての子要素と子孫要素を削除できます。

// Removes all descendants of the element from the DOM.
// (Simulated for Node.js environment)
const $ = (selector) => ({
  empty: () => console.log(`Removed all descendants of ${selector}`)
});
$("#target").empty();

remove()メソッド

remove()メソッドは、要素の子孫要素だけでなく、要素自体もDOMから削除します。

/*
Removes the element and 
all descendants of the element from the DOM.
*/
$('#target').remove();

おめでとうございます

おめでとうございます 🎉

DOM操作について学びました。

次のセクションでは、JQueryでのスタイリングについて学びます。

よくある質問

「jQueryによるDOM操作 - 2」レッスンは無料ですか？

はい。「jQueryによるDOM操作 - 2」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、jQuery Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 jQuery Academyコースには全1レッスンが含まれています。

「jQueryによるDOM操作 - 2」で何を学びますか？

jQueryによるDOM操作 - 2 ブラウザで直接実行するハンズオンコードでjQuery Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

jQuery Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのjQuery Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。これはレッスン1/1です。

「jQueryによるDOM操作 - 2」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このjQuery Academyレッスンでコードを書いて実行できますか？

はい。すべてのjQuery Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

← jQuery Academyに戻る