Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from http://developer.mozilla.org/ja/docs/Web/API/Element/insertAdjacentHTML below:

Element: insertAdjacentHTML() メソッド - Web API

Baseline Widely available

insertAdjacentHTML() は Element インターフェイスのメソッドで、指定されたテキストを HTML または XML として解釈し、結果のノードを DOM ツリーの指定された位置に挿入します。

insertAdjacentHTML(position, text)

position

文字列で、要素の相対的な位置を表します。以下のいずれかでなければなりません。

"beforebegin"

要素の前。要素が DOM ツリー内にあり、親要素がある場合にのみ有効です。

"afterbegin"

要素のすぐ内側、最初の子の前。

"beforeend"

要素のすぐ内側、最後の子の後。

"afterend"

要素の後。要素が DOM ツリー内にあり、親要素がある場合にのみ有効です。

text

HTML または XML として解釈し、ツリーに挿入する文字列です。

なし (undefined)。

このメソッドは、以下の種類の DOMException を発生させることがあります。

NoModificationAllowedError DOMException

position が "beforebegin" または "afterend" で、要素が親を持っていないか、親が Document オブジェクトである場合に発生します。

SyntaxError DOMException

position が掲載されている 4 つの値のいずれでもない場合に発生します。

insertAdjacentHTML() は挿入先の要素を再解釈するものではないため、既存の要素や要素内部の破壊を伴いません。余分なシリアル化のステップを回避できる分、innerHTML の操作よりもはるかに高速な動作となります。

挿入されるコンテンツの使用可能な位置は、以下のように可視化できます。

<!-- beforebegin -->
<p>
  <!-- afterbegin -->
  foo
  <!-- beforeend -->
</p>
<!-- afterend -->

insertAdjacentHTML() を使用してページに HTML を挿入する場合、エスケープされていないユーザー入力を使用しないように注意してください。

プレーンテキストを挿入する場合は、insertAdjacentHTML() を使用しないでください。代わりに Node.textContent プロパティか Element.insertAdjacentText() メソッドを使用してください。これは、渡されたコンテンツを HTML として解釈せず、生のテキストとして挿入します。

<select id="position">
  <option>beforebegin</option>
  <option>afterbegin</option>
  <option>beforeend</option>
  <option>afterend</option>
</select>

<button id="insert">Insert HTML</button>
<button id="reset">Reset</button>

<p>
  Some text, with a <code id="subject">code-formatted element</code> inside it.
</p>

const insert = document.querySelector("#insert");
insert.addEventListener("click", () => {
  const subject = document.querySelector("#subject");
  const positionSelect = document.querySelector("#position");
  subject.insertAdjacentHTML(
    positionSelect.value,
    "<strong>inserted text</strong>",
  );
});

const reset = document.querySelector("#reset");
reset.addEventListener("click", () => {
  document.location.reload();
});

• Element.insertAdjacentElement()
• Element.insertAdjacentText()
• XMLSerializer: DOM ツリーを XML 文字列へシリアライズ
• Henri Sivonen 氏による hacks.mozilla.org へのゲストポスト には、幾つかのケースでは insertAdjacentHTML がより速い方法であることを示すベンチマークが含まれています。

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4