innerHTMLとouterHTML

horino 1,833views 更新:2014年5月28日

javaScriptでdomを操作するときなどによく使うのがinnerHTMLとouterHTMLです。

element.innerHTML("<span>aaa</span>")

のようにすると、elementの子要素として<span>aaa</span>が追加されます。

また、

element.outerHTML("<span>aaa</span>")

とすると、もともとのelementがなくなり、そのかわりに<span>aaa</span>が追加されます。

innerHTMLとouterHTMLとは、もともとあったelementを残すか残さないかの違いというわけです。

 

似たようなものに、innerTextとouterTextがあり、これらは引数を文字列として追加します(innerHTML/outerHTMLはHTMLをHTMLとして扱います)。

なお、ユーザーの入力を直接引数として扱うような可能性がある場合は、XSS対策の観点からinnerHTML/outerHTMLは好ましくないようです。

 

 

ログイン / 新規登録してコメントする

このソースコードをストックして後で利用したり、作業に利用したソースコードをまとめることができます。

こちらもお役に立つかもしれません