Web Developers Antenna 〜ウェブ開発者アンテナ〜 [W'ANEB]

Web Developers Antennaでは、開発ノウハウ、便利ツール、Web運用に関する情報を蓄積していきます。

*

document . writeはやめて、innerHTMLを使おう

      2015/07/14

document . writeはやめて、innerHTMLを使おう

Contents

document.write()は使っちゃいけなかった?

ページ内に何かを動的に表示する場合、旧来の方法ではdocument.write()を使うことが多かったかと思います。

しかしW3CのHTML5の2010年10月19日の仕様書3.5.3には推奨されないと書いてあります。

document . write(text…)
In general, adds the given string(s) to the Document’s input stream.
This method has very idiosyncratic behavior. In some cases, this method can affect the state of the HTML parser while the parser is running, resulting in a DOM that does not correspond to the source of the document. In other cases, the call can clear the current page first, as if document.open() had been called. In yet more cases, the method is simply ignored, or throws an exception. To make matters worse, the exact behavior of this method can in some cases be dependent on network latency, which can lead to failures that are very hard to debug. For all these reasons, use of this method is strongly discouraged.
This method throws an INVALID_STATE_ERR exception when invoked on XML documents.

(www.w3.orgより引用
http://www.w3.org/TR/2011/WD-html5-20110525/apis-in-html-documents.html#document.write

document.write()の代替手段は?

では、document . write(text…) の代替としては何を使えばよいか?

調べたところでは、innerHTML を利用するようにと記載があります。
Polyglot Markup: HTML-Compatible XHTML Documentsをみると

9. Script and Styleに記載あり。
Although document.write() and document.writeln() are valid in an HTML document, neither function may be used in XHTML. Therefore, neither is used in polyglot markup. Instead, use the innerHTML property for both HTML and XHTML. Note that the innerHTML property takes a string. XML parsers parse the string as XML in XHTML. HTML parsers parse the string as HTML in HTML. Because of the difference in parsing, if you send the parser content that does not follow the rules for polyglot markup the results will differ for a DOM create with an XML parser and one created with an HTML parser.

(www.w3.orgより引用
http://www.w3.org/TR/2011/WD-html-polyglot-20110405/

事例

では実際に、innerHTMLを使ってみます。

まず、HTMLファイル内にdivタグなど文字を表示するためのタグを設置します。さらにタグにアクセスするためid属性でID名を指定します。
ID名を指定してdivタグ内に文字列を表示させることができます。
document.getElementById(“ID名”).innerHTML = “表示文字列”

document.write()の代わりとして使うにはwindow.onloadと組み合わせることになります。実際のスクリプトは以下のようになります。

事例スクリプト

<!DOCTYPE html>
<html>
<head>
<meta http-equiv=”content-type” content=”text/html;charset=utf-8″>
<script type=”text/javascript”>
window.onload = function() {
var txt = “JavaScript から読み込まれた文字列表示”;
document.getElementById(“text”).innerHTML = txt;
}
</script>
<title>事例スクリプト</title>
</head>
<body>
<p>ページをロードするとテキストが表示されます。</p>
<div id=”text”></div>
</body>
</html>

いかがでしょうか。

心に留めて気をつけていただければと思います。

 - JavaScript, Web Development , ,