本ページには広告が含まれています。
指定されたHTML文字列を現在の要素の前後、または内部に挿入します。
- 構文
- Element.insertAdjacentHTML( position, element )
- 引数
- position 省略可
- 要素を挿入する位置
- beforebegin
- 現在の要素の直前
- afterbegin
- 現在の要素の直下、最初の子要素の前
- beforeend
- 現在の要素の直下、最後の子要素の後
- afterend
- 現在の要素の直後
- element 省略可
- 挿入する要素
- 戻り値
Element オブジェクトを返すメソッド・プロパティ
- Document.createElement メソッド (DOM)
- tagNameで指定したHTML要素、あるいはtagNameを認識できない場合HTMLUnknownElementを生成します。
- Document.createElementNS メソッド (DOM)
- 指定したタグ名およびネームスペースURIで、新しい要素を生成します。
- Document.getElementById メソッド (DOM)
- 特定のidを持つエレメントへのオブジェクト参照を返します。
- Document.querySelector メソッド (DOM)
- 指定したセレクターに一致する、文書内で最初の要素ノードを返します。
- Document.documentElement プロパティ (DOM)
- 文書の直接の子であるElementを返します。HTML文書では、これは通常は文書のhtml要素を表すHTMLElementオブジェクトになります。
- HTMLCollection.item メソッド (DOM)
- HTMLコレクション内のインデックス番号で指定された位置にある要素を取得します。存在しないインデックス番号を指定した場合は、NOTHINGを返します。
- HTMLCollection.namedItem メソッド (DOM)
- 引数に指定されたidを持つ要素を取得します。要素が見つからない場合NOTHINGを返します。
- Element.closest メソッド
- 指定された CSSセレクタ に最も近い祖先要素を返します。
- Attr.ownerElement プロパティ (DOM)
- 属性が所属する要素を返します。
position
positionに指定する値は、IE11以降に使用不可となった4種類のメソッドに対応しています。
| メソッド | 対応する引数 | 説明 |
|---|---|---|
| Element.before メソッド | beforebegin | 現在の要素の直前 |
| Element.prepend メソッド | afterbegin | 現在の要素の直下、最初の子要素の前 |
| Element.append メソッド | beforeend | 現在の要素の直下、最後の子要素の後 |
| Element.after メソッド | afterend | 現在の要素の直後 |
使い方
IDがcontentの要素の末尾に「Hello world!」を追加します。
参考文献
公開日:
更新日:
関連記事
- Element.append メソッド (DOM)
- 指定された要素の子要素リストの末尾に、一つ以上のNodeオブジェクトやDOMStringを追加します。
- Element.before メソッド (DOM)
- 指定した要素やHTML文字列を現在の要素の前に追加します。
- Element.prepend メソッド (DOM)
- 指定された要素の子要素リストの先頭に、一つ以上のNodeオブジェクトやDOMStringを追加します。