innerHTMLプロパティについて
innerHTMLプロパティについて調べてみます。
innerHTMLプロパティはHTML5から標準化されたプロパティで、Elementノード、Documentノードで定義されています。
innerHTMLプロパティを使うと、マークアップを含んだ文字列形式で要素のコンテンツが返ります。
また、outerHTMLプロパティも同様に標準化されています。
こちらはHTMLドキュメント内のタグ情報(コンテンツの開始タグ、終了タグ)も含んだ形でマークアップ文字列が返ります。
outerHTMLはElementノードのみ定義されています。
また、HTML5で標準化されたメソッドとしてinsertAdjacentHTML()があります。
こちらはinnerHTMLプロパティと使用する場面で切り分けて使用します。
先ほどinnerHMTLプロパティは値を取得(マークアップを含んだ文字列形式で要素のコンテンツが返る)と書きましたが
innerHTMLプロパティは値を代入することもできます。
ただ、innerHTMLプロパティで値を代入すると、HTMLドキュメントのイベントが破壊されます。
javascriptのイベントが破壊されては困る場面でinsertAdjacentHTML()メソッドを使って、
HTMLドキュメント内の要素にDOMを追加することが可能になります。
以下、実際にHTMLドキュメントを使って試してみます。
HTMLドキュメントの要素を、innerHTMLを使ってプレーンテキストで取得する
HTMLドキュメントの要素を、プレーンテキストで取得する方法を、
実際に試してみました。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>テストHTML</title>
</head>
<body>
<div id="test1">
<div id="p1" name="p1name">p1text</div>
<input class="form1" id="fp1" type="text" name="test1">
<div id="p2">p2text
<div id="c1">c1text</div>
<div id="c2">c2text</div>
<div id="c3">c3text</div>
</div>
<div id="p3" name=3>p3text
<div id="d1">d1text</div>
<div id="d2">d2text</div>
<div id="d3">d3text</div>
<div id="d4">d4text</div>
</div>
</div>
<script type="text/javascript">
// ID「p1」のオブジェクトを取得
let p1 = document.getElementById("p1");
// 取得したオブジェクトのattributesを確認
console.log("p1 -> " + p1.textContent);
</script>
</body>
</html>
出力結果は次のようになります。
p1 -> p1text
HTMLドキュメントの要素を、innerHTMLを使って内容を書き変える
では次に、innerHTMLを使って、
<div id="p1" name="p1name">p1text</div>
の内容を更新してみます。
先ほどのHTMLを以下のように変更しました。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>テストHTML</title>
</head>
<body>
<div id="test1">
<div id="p1" name="p1name">p1text</div>
<input class="form1" id="fp1" type="text" name="test1">
<div id="p2">p2text
<div id="c1">c1text</div>
<div id="c2">c2text</div>
<div id="c3">c3text</div>
</div>
<div id="p3" name=3>p3text
<div id="d1">d1text</div>
<div id="d2">d2text</div>
<div id="d3">d3text</div>
<div id="d4">d4text</div>
</div>
</div>
<script type="text/javascript">
// ID「p1」のオブジェクトを取得
let p1 = document.getElementById("p1");
// innerHTMLを使って内容を書き換える
p1.innerHTML = 'p1 text update !';
// 取得したオブジェクトのattributesを確認
console.log("p1 -> " + p1.textContent);
</script>
</body>
</html>
出力結果は次のようになります。
p1 -> p1 text update !
HTMLドキュメントの内容が書き変わったので(厳密に言うと、代入したタイミングでイベントも破棄されています)、
ログ出力には最初の例(test1.html)とは異なった値が出力されました。
HTMLドキュメントの要素を、textContentを使って内容を書き変える
では、textContentを使って、HTMLドキュメントの内容を変更してみます。
先ほどのHTMLを以下のようにさらに変更しました。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>テストHTML</title>
</head>
<body>
<div id="test1">
<div id="p1" name="p1name">p1text</div>
<input class="form1" id="fp1" type="text" name="test1">
<div id="p2">p2text
<div id="c1">c1text</div>
<div id="c2">c2text</div>
<div id="c3">c3text</div>
</div>
<div id="p3" name=3>p3text
<div id="d1">d1text</div>
<div id="d2">d2text</div>
<div id="d3">d3text</div>
<div id="d4">d4text</div>
</div>
</div>
<script type="text/javascript">
// ID「p1」のオブジェクトを取得
let p1 = document.getElementById("p1");
// textContentを使って内容を書き換える
p1.textContent = 'p1 text update (textContent) !';
// 取得したオブジェクトのattributesを確認
console.log("p1 -> " + p1.textContent);
</script>
</body>
</html>
出力結果は次のようになります。
p1 -> p1 text update (textContent) !
今回確かめたように、innerHTMLとtextContentを使って、HTMLドキュメントを書き変えましたが、
どちらもコンテンツの更新はできることがわかりました。
textContentとinnerHTMLの違いについて
上記のサンプルから、textContentとinnerHTMLはどちらもHTMLドキュメントを書き変える(代入する)ことができます。
動きだけを見ると両社には違いはありませんが、
textContentプロパティは指定した要素のTextノードを全て連携した値です。
innerTextプロパティはscript要素のコンテンツを返さず、空白は取り除かれ、table (テーブル要素)は読み出し専用プロパティになる。という点が異なります。