1. ホーム /
  2. WEB /
  3. javascriptでHTML要素追加！jQueryとも比較！
  • 2020.02.28

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 = 'insertBeforeで要素追加';
sampleDiv.parentNode.insertBefore(newNode, sampleDiv); 

// jQueryで要素を追加する方法
$('#sample').before($('<span>beforeで要素追加</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 = 'insertBeforeで要素追加';
sampleDiv.insertBefore(newNode, sampleDiv.firstChild);

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

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

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

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

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

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

要素の下に要素追加

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

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

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

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