jQueryのappend()を、jQueryを使わない形に変換する #appendChild

jQueryのappend()でhtmlの文字列を指定してDOM組み立てしていたレガシーコードを、jQueryを使わない形に変換する方法です。

変更前コード

id='message'で存在しているhtmlタグの子要素にspanを追加しているコードです。

$('#message').append('<span>hello</span>')

jQueryを使わない形に変更コード(js)

下記がjQueryを使わな形に置き換えたコードです。

document.getElementById('message').insertAdjacentHTML('beforeend', '<span>hello</span>');

jQueryで$('#message')していた箇所はgetElementById()に置き換え可能です。

(createElement()によるタグのelement生成ではなく)html文字列を直接DOMに追加したい場合はinsertAdjacentHTML()関数を利用します。insertAdjacentHTML()関数の第一引数はタグの追加先です。'beforeend'を指定することでid='message'に子要素があった時に既存の子要素の後ろに追加されます。これによってjQueryのappend()と同等の処理が行なえます。

第一引数は、下記の値が指定可能です。

• 'beforebegin'
  • elementの直前に挿入
• 'afterbegin'
  • element内部の最初の子要素の前に挿入
• 'beforeend'
  • element内部の最後の子要素の後に挿入
• 'afterend'
  • elementの直後に挿入

TypeScriptにする場合

idで指定したノードが存在することが保証されている場合は、getElementById()の後ろに!を付けることでTypeScriptのワーニングを抑制できます。

document.getElementById('message')!.insertAdjacentHTML('beforeend', '<span>hello</span>');

Amazonでおトクに買い物する方法

AmazonチャージでポイントGET

Amazonは買いもの前にAmazonギフト券をチャージしてポイントをゲットしないと損！