<noscript>タグの innerHTML とほかのタグの innerHTML では取得結果が異なることに気が付きました。
検証コード
<noscript>タグ、<div>タグそれぞれの内部に以下の内容を記載しています。
<b>本来表示したい内容</b><br /> <b>本来表示したい内容</b><br /> <img src="test.png" alt="test image" width="100" height="100" /><br />
その内容を JavaScript を使用して、innerHTML と innerText で取得して、console.log()でログ出力しています。
<html>
<head>
<title>test page</title>
</head>
<body>
<h1>TEST.</h1>
<noscript id="id_noscript">
<b>本来表示したい内容</b><br />
<b>本来表示したい内容</b><br />
<img src="test.png" alt="test image" width="100" height="100" /><br />
</noscript>
<div id="id_div">
<b>本来表示したい内容</b><br />
<b>本来表示したい内容</b><br />
<img src="test.png" alt="test image" width="100" height="100" /><br />
</div>
<script type="text/javascript">
<!--
console.log("noscript");
console.log("innerHTML");
console.log(document.getElementById("id_noscript").innerHTML);
console.log("innerText");
console.log(document.getElementById("id_noscript").innerText);
console.log("div");
console.log("innerHTML");
console.log(document.getElementById("id_div").innerHTML);
console.log("innerText");
console.log(document.getElementById("id_div").innerText);
//-->
</script>
</body>
</html>
実行結果
コンソール出力
console.log() で出力した Chrome の JavaScript コンソールの内容です。
noscript noscript_inner.html:26
innerHTML noscript_inner.html:28
<b>本来表示したい内容</b><br />
&lt;b&gt;本来表示したい内容&lt;/b&gt<br />
<img src="test.png" alt="test image" width="100" height="100" /><br />
noscript_inner.html:29
innerText noscript_inner.html:31
<b>本来表示したい内容</b><br />
<b>本来表示したい内容</b><br />
<img src="test.png" alt="test image" width="100" height="100" /><br />
noscript_inner.html:32
innerHTML noscript_inner.html:36
<b>本来表示したい内容</b><br>
<b>本来表示したい内容</b><br>
<img src="test.png" alt="test image" width="100" height="100"><br>
noscript_inner.html:37
innerText noscript_inner.html:39
本来表示したい内容
<b>本来表示したい内容</b>
noscript_inner.html:40
まとめ
<noscript>タグ
innerHTML : <noscript>タグの中身を&でエスケープした内容が取得された。innerText : <noscript>タグの中身がそのまま取得された。
<div>タグ
innerHTML : <div>タグの中身がそのまま取得された。innerText : <div>タグの中身から<>に囲まれた部分を削除し、&でエスケープされた文字をアンエスケープした内容が取得された。
<noscript>の中身を JavaScript で取得するようなコードを書くことはあまりないとは思いますが、このような動作をするということは頭に置いておいた方がよさそうです。
この比較をFirefox/IE/Chrome間で行ってみました。
コメントを投稿 （ここをクリックしてコメント投稿フォームを表示）
コメント投稿機能について