appendChildとinnerHTMLを短く

質問

テーブルのthタグと内容を追加したい
・下記で期待通り動作するのですが、冗長かなと思い、スッキリさせたいです
・どうすれば良いでしょうか？

var tr = document.createElement("tr");
tbody.appendChild(tr);
var th = document.createElement("th");
th.innerHTML = '見出1';
tr.appendChild(th);
var th = document.createElement("th");
th.innerHTML = '見出2';
tr.appendChild(th);
var th = document.createElement("th");
th.innerHTML = '見出3';
tr.appendChild(th);
var th = document.createElement("th");
……

回答No.2

think49 · ベストアンサー

table要素にはAPIが用意されているので活用してみてください。
http://www2u.biglobe.ne.jp/~oz-07ams/prog/dom-ref/HTML/HTMLTableElement.html
http://jsfiddle.net/6gjfbj9w/

> th.innerHTML = '見出1';
ただの文字列挿入に innerHTML を使用するのは好ましくありません。

# Re: re97さん

お礼

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

＞table要素にはAPIが用意されているので
・これまで一度も使用したことがなかったため、リンク先、大変参考になりましたー

＞ただの文字列挿入に innerHTML を使用するのは好ましくありません
・アドバイスありがとうございます
・innerTextを使用するようにしますー

回答No.1

byDesign

以下のような感じでどうでしょうか。

案１：関数を使って対応
function insertTh(tr, html){
var th = document.createElement("th");
th.innerHTML = html;
tr.appendChild(th);
}

var tr = document.createElement("tr");
tbody.appendChild(tr);
insertTh(tr, '見出1');
insertTh(tr, '見出2');
insertTh(tr, '見出3');
:

案2:配列をforループで回して対応
var htmls = [
'見出1',
'見出2,
'見出3
];

var tr = document.createElement("tr");
tbody.appendChild(tr);

for(var i=0; i<htmls.length; i++){
var th = document.createElement("th");
th.innerHTML = htmls[i]
tr.appendChild(th);
}

案3:jQueryで対応
var $tr = $('<tr></tr>');
$tr.append('<th>見出し1</th>');
$tr.append('<th>見出し2</th>');
$tr.append('<th>見出し3</th>');

お礼

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

・こういう色々な書き方を知りたかったので、大変参考になりました
・jQueryも書いていただいたので、頭の中が整理できたような気がしますー