HTML DOM Element insertAdjacentHTML() メソッド

定義と使用法

insertAdjacentHTML() 指定された位置にHTMLコードを挿入する方法。

合法な位置：

値 説明
afterbegin 要素の始わりの後（最初の子要素）。
afterend 要素の後。
beforebegin 要素の前。
beforeend 要素の終わりの前に（最後の子要素）。

例

例1

header要素の後に新しい<p>要素を挿入します：

const h2 = document.getElementById("myH2");
let html = "<p>My new paragraph.</p>";
h2.insertAdjacentHTML("afterend", html);

自分で試してみてください

例2

"afterbegin"を使用：

let html = "<span style='color:red'>My span</span>"; h2.insertAdjacentHTML("afterbegin", html);

自分で試してみてください

例3

"beforebegin"を使用：

h2.insertAdjacentHTML("beforebegin", html);

自分で試してみてください

例4

"beforeend"を使用：

h2.insertAdjacentHTML("beforeend", html);

自分で試してみてください

構文

element.insertAdjacentHTML(position, html)

または

node.insertAdjacentHTML(position, html)

パラメータ

パラメータ 説明
position

必須。要素に対する位置：

  • afterbegin
  • afterend
  • beforebegin
  • beforeend
html 挿入するHTML。

ブラウザのサポート

すべてのブラウザがサポートしています element.insertAdjacentHTML()：

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
サポート サポート サポート サポート サポート サポート