JavaScriptのinsertAdjacentHTML()とinsertAdjacentElement()を使って、DOMツリー内の指定位置への要素の挿入を試してみます。
insertAdjacentHTML()
まずはinsertAdjacentHTML()です。
#sampleに対して挿入を行います。
1 2 3 4 | <div id="sample"> <p>#sample内部1つ目の要素です。</p> <p>#sample内部2つ目の要素です。</p></div> |
insertAdjacentHTML()は4つの挿入位置の指定ができるので、それぞれ試してみます。
1 2 3 4 5 6 7 8 9 10 | var sample = document.getElementById('sample');// beforebegin: 要素の直前に挿入sample.insertAdjacentHTML('beforebegin', '<p>beforebegin</p>');// afterbegin: 要素内部の先頭に挿入sample.insertAdjacentHTML('afterbegin', '<p>afterbegin</p>');// beforeend: 要素内部の末尾に挿入sample.insertAdjacentHTML('beforeend', '<p>beforeend</p>');// afterend: 要素の直後に挿入sample.insertAdjacentHTML('afterend', '<p>afterend</p>'); |
デベロッパーツールで確認すると、以下のように挿入されました。
1 2 3 4 5 6 7 8 | <p>beforebegin</p><div id="sample"> <p>afterbegin</p> <p>#sample内部1つ目の要素です。</p> <p>#sample内部2つ目の要素です。</p> <p>beforeend</p></div><p>afterend</p> |
insertAdjacentHTML()の指定方法は以下の通りです。
| element.insertAdjacentHTML(position, text); | elementのpositionの位置にtextを挿入する。 positionの値は以下の４種類。 beforebegin: 要素の直前に挿入 afterbegin: 要素内部の先頭に挿入 beforeend: 要素内部の末尾に挿入 afterend: 要素の直後に挿入 |
|---|
insertAdjacentElement()
次にinsertAdjacentElement()を試してみます。
基本的にはinsertAdjacentHTML()と同じような使い方になります。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | var sample = document.getElementById('sample');// 挿入する要素を生成var test01 = document.createElement('p');test01.textContent = 'beforebegin';// beforebegin: 要素の直前に挿入sample.insertAdjacentElement('beforebegin', test01);// 挿入する要素を生成var test02 = document.createElement('p');test02.textContent = 'afterbegin';// afterbegin: 要素内部の先頭に挿入sample.insertAdjacentElement('afterbegin', test02);// 挿入する要素を生成var test03 = document.createElement('p');test03.textContent = 'beforeend';// beforeend: 要素内部の末尾に挿入sample.insertAdjacentElement('beforeend', test03);// 挿入する要素を生成var test04 = document.createElement('p');test04.textContent = 'afterend';// afterend: 要素の直後に挿入sample.insertAdjacentElement('afterend', test04); |
insertAdjacentHTML()との違いは、insertAdjacentHTML()は第二引数のテキストをパースして使用するのに対して、insertAdjacentElement()はHTML要素を事前に生成して、第二引数に指定する形になります。
挿入後の結果はinsertAdjacentHTML()と同じになりました。
1 2 3 4 5 6 7 8 | <p>beforebegin</p><div id="sample"> <p>afterbegin</p> <p>#sample内部1つ目の要素です。</p> <p>#sample内部2つ目の要素です。</p> <p>beforeend</p></div><p>afterend</p> |
insertAdjacentElement()の指定方法は以下の通りです。
| targetElement.insertAdjacentElement(position, element); | targetElementのpositionの位置にelementを挿入する。 positionの値は以下の４種類。 beforebegin: 要素の直前に挿入 afterbegin: 要素内部の先頭に挿入 beforeend: 要素内部の末尾に挿入 afterend: 要素の直後に挿入 |
|---|
コメントが承認されるまで時間がかかります。