th = th.cloneNode(true);

質問

先日回答いただいた内容で分からないことがあったので教えて下さい。
http://jsfiddle.net/6gjfbj9w/

下記は何をやっているのでしょうか？
・thタグノードを自身へ複製？
th = th.cloneNode(true);

■自分の理解
th.appendChild(doc.createTextNode('string'));
→<th>string</th>

th = th.cloneNode(true);
→thタグノードを自身へ複製？

th.firstChild.data = ths[i];
→<th>見出1</th>

tr.appendChild(th);
→<tr><th>見出1</th></tr>

th = th.cloneNode(true);
→thタグノードを自身へ複製？
→<th>見出1</th>？

th.firstChild.data = ths[i];
→<th>見出2</th>

tr.appendChild(th);
→<tr><th>見出1</th><th>見出2</th></tr>

■質問
・下記はなくても良いように思うのですが、コメントアウトすると、期待した動作になりまｓたん
・なぜ必要なのでしょうか？
th = th.cloneNode(true);

回答No.1

think49 · ベストアンサー

http://okwave.jp/qa/q8810003.html で回答したコードですね。

> th = th.cloneNode(true);
th要素ノードを複製しています。
https://developer.mozilla.org/ja/docs/Web/API/Node.cloneNode
オブジェクトは参照なので同じオブジェクトを使い回してappendChildしたら要素が移動するだけで複数の要素を生成できません。
createElementから作り直すのが一般的だと思いますが、同じような要素を何度も作るのは無駄なので雛形となるth要素ノードを生成しておき、cloneNodeで複製しています。

---
http://okwave.jp/qa/q8810003.html の件。

> ・innerTextを使用するようにしますー
innerText はIEの独自拡張であり、全てのブラウザで使用できません。
innerTextを実装されている他のブラウザもありますが、標準化されていない為に挙動が同じ保証もありません。
似たプロパティとして textContent がありますが、innerText とは挙動が異なります。
http://d.hatena.ne.jp/cou929_la/20110517/1305644081
代入する分には textContent, innerText を使い分ければ問題ないかもしれませんが、仕様を追ってないので私からはお勧めできないですね。
IE8- を保証するなら createTextNode が最も無難な選択肢だと思います。

何度か仕様にまつわる質問をされていると思いますが、調べ方を工夫してみて下さい。
仕様のURLをブックマークしておくとか、Google検索でサイト検索してみるとか。
innerTextの件は少し検索すれば分かると思うのですが、おそらくまともに調べていないのではないでしょうか。
http://www.quirksmode.org/dom/html/
https://developer.mozilla.org/ja/docs/Web/API/Node.textContent
http://msdn.microsoft.com/en-us/library/ie/ms533899.aspx

# Re: re97さん

お礼

回答ありがとうございました。

＞オブジェクトは参照なので同じオブジェクトを使い回してappendChildしたら要素が移動するだけ
・参考になりました

＞W3C DOM Compatibility - HTML
・このページ初めて知りました
・見やすいですね

＞標準化されていない為に挙動が同じ保証もありません
・メソッド毎にブラウザ対応状況を確認していく癖をつけた方が良いなと思いました

＞innerTextの件は少し検索すれば分かると思うのですが
・標準的な処理だと思い込んでました…