javascript htmlコード文字列をappendChildしたい

<script>
window.addEventListener('load', function() {
  var table = "<table><tr><th>1</th><td>2</td></tr></table>";
  document.getElementById("hoge").appendChild(table);
});
</script>
<body>
<div id=hoge"></div>
</body>

上記のようにしたいのですが、
node形式ではないのでダメとエラーが出るのですが、
こういう場合どう書き替えたらよいでしょうか！

行動規範の内容に同意します

回答3件

ベストアンサー

あまりおすすめしませんがinnerHTMLに文字列として付加してやればよいかと

投稿2018/07/06 04:21

yambejp

総合スコア114784

cheche0830

2018/07/06 04:23

できました！！！！！！！ありがとうございます！

行動規範の内容に同意します

createElementしてappendChildすればいいじゃない。

投稿2018/07/06 04:14

tkturbo

総合スコア5572

cheche0830

2018/07/06 04:21

var table = "<table><tr><th>1</th><td>2</td></tr></table>"; この状態からcreateElement可能でしょうか？上記が実際は、文字列からでしか取得できない状態でして・・・

tkturbo

2018/07/06 04:23

> 文字列からでしか取得できない ↑ではjQuery導入を推奨。

cheche0830

2018/07/06 04:24

すいません、jqueryもだめでして・・ありがとうございました。

行動規範の内容に同意します

既に解決しているようですが、「こういうやり方もあるよ」という程度で参考にしてもらえればと。

htmlのミスがあっては正しく認識しないかもしれませんので。

html
1<div id=hoge"></div>

↓

html
1<div id="hoge"></div>

もし１，２など「値」だけ文字列で受け取るならこちら↓。
createElement

js
1window.addEventListener('load', function() {
2    var table = document.createElement("table");
3    var th1 = document.createElement("th");
4    th1.textContent = "1";
5    var td1 = document.createElement("td");
6    td1.textContent = "2";
7    var tr1 = document.createElement("tr");
8    tr1.appendChild(th1);
9    tr1.appendChild(td1);
10    table.appendChild(tr1);
11    document.getElementById("hoge").appendChild(table);
12});

文字通りtableタグ全部受け取るならこちら↓。

力技。一度仮のエレメントを作ってappendChild()した後に子ノードとして取り出して、hogeへappendChild()

js
1window.addEventListener('load', function() {
2    var str = "<table><tr><th>1</th><td>2</td></tr></table>";
3    var div = document.createElement("div");
4    div.innerHTML = str;
5    var table = div.childNodes[0];
6    document.getElementById("hoge").appendChild(table );
7});