プロが教えるわが家の防犯対策術!

先日回答いただいた内容で分からないことがあったので教えて下さい。
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>


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

A 回答 (1件)

http://oshiete.goo.ne.jp/qa/8810003.html で回答したコードですね。

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

---
http://oshiete.goo.ne.jp/qa/8810003.html の件。

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

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

# Re: re97さん
    • good
    • 0
この回答へのお礼

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

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

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

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

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

お礼日時:2014/11/03 11:29

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!