Notice: Constant SAVEQUERIES already defined in /home/uwsc/domains/uwsc.jp/public_html/wp-config.php on line 125

Notice: 関数 wp_add_inline_script が誤って呼び出されました。<script> タグを wp_add_inline_script() に渡さないでください。 詳しくは WordPress のデバッグをご覧ください。 (このメッセージはバージョン 4.5.0 で追加されました) in /home/uwsc/domains/uwsc.jp/public_html/wp-includes/functions.php on line 5905

Notice: Undefined variable: post in /home/uwsc/domains/uwsc.jp/public_html/wp-content/plugins/code-snippets/php/snippet-ops.php(663) : eval()'d code on line 147

Notice: Undefined variable: post in /home/uwsc/domains/uwsc.jp/public_html/wp-content/plugins/code-snippets/php/snippet-ops.php(663) : eval()'d code on line 154

Notice: Trying to get property 'ID' of non-object in /home/uwsc/domains/uwsc.jp/public_html/wp-content/plugins/code-snippets/php/snippet-ops.php(663) : eval()'d code on line 154

Notice: Undefined index: description in /home/uwsc/domains/uwsc.jp/public_html/wp-content/plugins/code-snippets/php/snippet-ops.php(663) : eval()'d code on line 200

Notice: Trying to access array offset on value of type null in /home/uwsc/domains/uwsc.jp/public_html/wp-content/plugins/code-snippets/php/snippet-ops.php(663) : eval()'d code on line 200
Element.insertAdjacentHTML メソッド | UWSC辞典


Notice: Trying to access array offset on value of type null in /home/uwsc/domains/uwsc.jp/public_html/wp-content/plugins/code-snippets/php/snippet-ops.php(663) : eval()'d code on line 27

Notice: Trying to access array offset on value of type null in /home/uwsc/domains/uwsc.jp/public_html/wp-content/plugins/code-snippets/php/snippet-ops.php(663) : eval()'d code on line 31
Elementエレメント.insertAdjacentHTML メソッド

本ページには広告が含まれています。


Notice: Undefined index: default_argument in /home/uwsc/domains/uwsc.jp/public_html/wp-content/plugins/code-snippets/php/snippet-ops.php(663) : eval()'d code on line 140

Notice: Undefined offset: 1 in /home/uwsc/domains/uwsc.jp/public_html/wp-content/plugins/code-snippets/php/snippet-ops.php(663) : eval()'d code on line 154

Notice: Trying to access array offset on value of type null in /home/uwsc/domains/uwsc.jp/public_html/wp-content/plugins/code-snippets/php/snippet-ops.php(663) : eval()'d code on line 67

Notice: Trying to access array offset on value of type null in /home/uwsc/domains/uwsc.jp/public_html/wp-content/plugins/code-snippets/php/snippet-ops.php(663) : eval()'d code on line 67

Notice: Trying to access array offset on value of type null in /home/uwsc/domains/uwsc.jp/public_html/wp-content/plugins/code-snippets/php/snippet-ops.php(663) : eval()'d code on line 67

Notice: Trying to access array offset on value of type null in /home/uwsc/domains/uwsc.jp/public_html/wp-content/plugins/code-snippets/php/snippet-ops.php(663) : eval()'d code on line 67

Notice: Trying to access array offset on value of type null in /home/uwsc/domains/uwsc.jp/public_html/wp-content/plugins/code-snippets/php/snippet-ops.php(663) : eval()'d code on line 67

Notice: Trying to access array offset on value of type null in /home/uwsc/domains/uwsc.jp/public_html/wp-content/plugins/code-snippets/php/snippet-ops.php(663) : eval()'d code on line 67

Notice: Trying to access array offset on value of type null in /home/uwsc/domains/uwsc.jp/public_html/wp-content/plugins/code-snippets/php/snippet-ops.php(663) : eval()'d code on line 67

Notice: Trying to access array offset on value of type null in /home/uwsc/domains/uwsc.jp/public_html/wp-content/plugins/code-snippets/php/snippet-ops.php(663) : eval()'d code on line 13

Notice: Undefined variable: program in /home/uwsc/domains/uwsc.jp/public_html/wp-content/plugins/code-snippets/php/snippet-ops.php(663) : eval()'d code on line 19

Warning: in_array() expects parameter 2 to be array, string given in /home/uwsc/domains/uwsc.jp/public_html/wp-content/plugins/code-snippets/php/snippet-ops.php(663) : eval()'d code on line 41

Notice: Undefined variable: program in /home/uwsc/domains/uwsc.jp/public_html/wp-content/plugins/code-snippets/php/snippet-ops.php(663) : eval()'d code on line 19

Notice: Undefined variable: context in /home/uwsc/domains/uwsc.jp/public_html/wp-content/plugins/code-snippets/php/snippet-ops.php(663) : eval()'d code on line 70

Notice: Undefined index: extension in /home/uwsc/domains/uwsc.jp/public_html/wp-content/plugins/code-snippets/php/snippet-ops.php(663) : eval()'d code on line 147

Notice: Undefined index: extension in /home/uwsc/domains/uwsc.jp/public_html/wp-content/plugins/code-snippets/php/snippet-ops.php(663) : eval()'d code on line 147

Notice: Undefined index: extension in /home/uwsc/domains/uwsc.jp/public_html/wp-content/plugins/code-snippets/php/snippet-ops.php(663) : eval()'d code on line 147

指定されたHTML文字列を現在の要素の前後、または内部に挿入します。

構文
Element.insertAdjacentHTML( position, element )
引数
position 省略可
要素を挿入する位置
beforebegin
現在の要素の直前
afterbegin
現在の要素の直下、最初の子要素の前
beforeend
現在の要素の直下、最後の子要素の後
afterend
現在の要素の直後
element 省略可
挿入する要素
戻り値

Element オブジェクトを返すメソッド・プロパティ

Document.insertAdjacentHTML (DOM)
tagNameで指定したHTML要素、あるいはtagNameを認識できない場合HTMLUnknownElementを生成します。
Document.insertAdjacentHTML (DOM)
指定したタグ名およびネームスペースURIで、新しい要素を生成します。
Document.getElementById メソッド (DOM)
特定のidを持つエレメントへのオブジェクト参照を返します。
Document.insertAdjacentHTML (DOM)
指定したセレクターに一致する、文書内で最初の要素ノードを返します。
Document.insertAdjacentHTML (DOM)
文書の直接の子であるElementを返します。HTML文書では、これは通常は文書のhtml要素を表すHTMLElementオブジェクトになります。
HTMLCollection.insertAdjacentHTML (DOM)
HTMLコレクション内のインデックス番号で指定された位置にある要素を取得します。存在しないインデックス番号を指定した場合は、NOTHINGを返します。
HTMLCollection.insertAdjacentHTML (DOM)
引数に指定されたidを持つ要素を取得します。要素が見つからない場合NOTHINGを返します。
Element.closest メソッド
指定された CSSセレクタ に最も近い祖先要素を返します。
Attr.insertAdjacentHTML (DOM)
属性が所属する要素を返します。

position

positionに指定する値は、IE11以降に使用不可となった4種類のメソッドに対応しています。

メソッド対応する引数説明
Element.before メソッドbeforebegin現在の要素の直前
Element.prepend メソッドafterbegin現在の要素の直下、最初の子要素の前
Element.append メソッドbeforeend現在の要素の直下、最後の子要素の後
Element.insertAdjacentHTML メソッドafterend現在の要素の直後

使い方

IDがcontentの要素の末尾に「Hello world!」を追加します。

HTML
<div id="content"></div>
UWSC
DIM Document = IE.Document
DIM Element = Document.querySelector("#content")

Element.insertAdjacentHTML("beforeend", "Hello world!")
HTML
<div id="content">Hello, world!</div>

参考文献

  1. 【JavaScript】jQueryなしでappend()と同じことを実行する | 株式会社シーポイントラボ|浜松のWEBシステム・RTK-GNSS開発

関連記事

Element.append メソッド (DOM)
指定された要素の子要素リストの末尾に、一つ以上のNodeオブジェクトやDOMStringを追加します。
Element.before メソッド (DOM)
指定した要素やHTML文字列を現在の要素の前に追加します。
Element.prepend メソッド (DOM)
指定された要素の子要素リストの先頭に、一つ以上のNodeオブジェクトやDOMStringを追加します。