insertAdjacentText、insertAdjacentHTMLメソッド

innerText、innerHTML、outerText、outerHTMLの各プロパティを使えば 要素の文字やHTMLを入れ替えることができた。これに対し、 insertAdjacentTextとinsertAdjacentHTMLはメソッドで、要素に文字およびHTMLの記述を 追加することができる。 指定できる属性は追加する位置(where)と追加する文字/HTML記述(text)で、次のように指定できる。

insertAdjacentText(where,text)
insertAdjacentHTML(where,text)

insertAdjacentTextはtextを文字列と解釈し、insertAdjacentHTMLはHTMLの記述と解釈する。 whereで指定できるのはBeforeBegin、AfterBegin、BeforeEnd、AfterEndの4つ。 4つのちがいは、このサンプルで確認できる(多分)。



BeforeBegin AfterBegin BeforeEnd AfterEnd

insertAdjacentTextのサンプル

AREA1


insertAdjacentHTMLのサンプル

AREA2