javascriptでHTML要素追加!jQueryとも比較!

javascriptで要素を追加する方法をご紹介していきます。
insertAdjacentHTMLを使用する方法と使用しない方法の2種類を記載していきます。

insertAdjacentHTMLは、だいたいのブラウザで対応済みですが、念のためそれ以外の方法も記載している感じになります。

insertAdjacentHTMLの対応ブラウザ
https://caniuse.com/#feat=insertadjacenthtml

併せてjQueryでの書き方も記載しておきます。

ご紹介する要素の追加位置はこちら。

// ここに要素を追加する方法
<div id="sample">
// ここに要素を追加する方法
test
// ここに要素を追加する方法
</div>
ここに要素を追加する方法// 

追加位置の上から順に記載していきます。

要素の上に要素追加

// ここに要素を追加する方法
<div id="sample">
test
</div>
<script>
// insertAdjacentHTMLで要素を追加する方法
var sampleDiv = document.getElementById('sample');
sampleDiv.insertAdjacentHTML('beforebegin', '<span>afterbeginで要素追加</span>');

//  insertBeforeで要素を追加する方法
var sampleDiv = document.getElementById('sample');
var newNode = document.createElement('span')
newNode.innerText = 'afterbeginで要素追加';
sampleDiv.parentNode.insertBefore(newNode, sampleDiv); 

// jQueryで要素を追加する方法
$('#sample').before($('<span>afterbeginで要素追加</span>'));
</script>

要素内の一番初めに要素追加

<div id="sample">
// ここに要素を追加する方法
test
</div>
<script>
// insertAdjacentHTMLで要素を追加する方法
var sampleDiv = document.getElementById('sample');
sampleDiv.insertAdjacentHTML('afterbegin', '<span>afterbeginで要素追加</span>');

insertBeforeで要素を追加する方法
var sampleDiv = document.getElementById('sample');
var newNode = document.createElement('span')
newNode.innerText = 'afterbeginで要素追加';
sampleDiv.insertBefore(newNode, sampleDiv.firstChild);

// jQueryで要素を追加する方法
$('#sample').prepend($('<span>afterbeginで要素追加</span>'));
</script>

要素内の一番最後に要素追加

<div id="sample">
test
// ここに要素を追加する方法
</div>
<script>
// insertAdjacentHTMLで要素を追加する方法
var sampleDiv = document.getElementById('sample');
sampleDiv.insertAdjacentHTML('beforeend', '<span>afterbeginで要素追加</span>');

// appendChildで要素を追加する方法
var sampleDiv = document.getElementById('sample');
var newNode = document.createElement('span')
newNode.innerText = 'afterbeginで要素追加';
sampleDiv.appendChild(newNode);

// jQueryで要素を追加する方法
$('#sample').append($('<span>afterbeginで要素追加</span>'));
</script>

要素の下に要素追加

<div id="sample">
test
</div>
ここに要素を追加する方法// 
<script>
// insertAdjacentHTMLで要素を追加する方法
var sampleDiv = document.getElementById('sample');
sampleDiv.insertAdjacentHTML('afterend', '<span>afterbeginで要素追加</span>');

// insertBeforeで要素を追加する方法
var sampleDiv = document.getElementById('sample');
var newNode = document.createElement('span')
newNode.innerText = 'afterbeginで要素追加';
sampleDiv.parentNode.insertBefore(newNode, sampleDiv.nextSibling);

// jQueryで要素を追加する方法
$('#sample').after($('<span>afterbeginで要素追加</span>'));
</script>

SNSでもご購読できます。