要素に別の要素を追加する JavaScript
要素に別の要素を追加する
ベースとなるHTML
|
1 2 3 4 5 |
<div class="target"> <div class="childs"></div> <div class="childs"></div> <div class="childs"></div> </div> |
appendChild
targetの一番最後に追加する。
|
1 2 3 4 5 6 7 8 |
const target = document.querySelector('.target'); const div = document.createElement('div'); div.setAttribute('class', 'childs'); const pTag = document.createElement('p'); pTag.innerText = `innerText`; div.appendChild(pTag); target.appendChild(div); // targetの'一番最後の'要素の'後に'追加。 |
結果
|
1 2 3 4 5 6 7 8 |
<div class="target"> <div class="childs"></div> <div class="childs"></div> <div class="childs"></div> <div class="childs"> ← 一番最後の要素の後 <p>innerText</p> </div> </div> |
insertBefore
targetの任意の場所に追加する。
|
1 2 3 4 5 6 7 8 9 |
const target = document.querySelector('.target'); const div = document.createElement('div'); div.setAttribute('class', 'childs'); const pTag = document.createElement('p'); pTag.innerText = `innerText`; div.appendChild(pTag); target.insertBefore(div, target.firstElementChild); // targetの'一番最初の'要素の'前に'追加。 |
結果
target.insertBefore(div, null)ならappendChildと同じ結果になる。
|
1 2 3 4 5 6 7 8 |
<div class="target"> <div class="childs"> ← 一番最初の要素の前 <p>innerText</p> </div> <div class="childs"></div> <div class="childs"></div> <div class="childs"></div> </div> |
append (jQuery)
targetの一番最後に追加する。※JavascriptのappendChildに相当する
|
1 2 3 4 5 6 7 8 |
const target = $('.target'); const div = $('<div>'); div.attr('class', 'childs'); const pTag = $('<p>'); pTag.text('innerText'); div.append(pTag); target.append(div); // targetの'一番最後の'要素の'後に'追加。 |
結果
|
1 2 3 4 5 6 7 8 |
<div class="target"> <div class="childs"></div> <div class="childs"></div> <div class="childs"></div> <div class="childs"> ← 一番最後の要素の後 <p>innerText</p> </div> </div> |
appendTo (jQuery)
|
1 2 3 4 5 6 7 8 |
const target = $('.target'); const div = $('<div>'); div.attr('class', 'childs'); const pTag = $('<p>'); pTag.text('innerText'); div.append(pTag); div.appendTo(target); // targetの'一番最後の'要素の'後に'追加。 |
結果はappendと同じ。書き順が逆になるだけ。
|
1 2 3 |
親.append(子); 子.appendTo(親); |
ただしこれの後にメソッドチェーンを続けて書くと、その影響を受ける対象が変わってくる。
|
1 2 3 |
親.append(子).hoge().fuga(); // .hoge().fuga()の対象は親になる。 子.appendTo(親).hoge().fuga(); // .hoge().fuga()の対象は子になる。 |
コメント
コメントはありません。