Q&A
なるほど、わかりやすいです。
ということは、masaya_ohashiさんの回答で、閉じタグがセットで追加されるとありましたが、この書き方だと閉じタグは.appendしなくてもよい、ということですね？
ちょっとだけラクできそうです(^^;;
とあるデータを表の形で表示するようなコードを書いているのですが、どうも.appendしているデータが順番に並んでいないようなのです。
JQuery
1<html lang="ja"> 2<body> 3<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 4<div id="test"></div> 5 6<script lang="javascript"> 7<!-- 8$("#test").empty(); 9$("#test").append("<table>\n"); 10$("#test").append("<tr><th>項目１</th><th>項目２</th><th>項目３</th></tr>\n"); 11$("#test").append("</table>\n"); 12//--> 13</script> 14</body> 15</html>
のようなコードで、<table>の中に<tr>,<td>がおさまってほしいのですが、DOM Explorerで見てみると<tr>が<table>の外に出てしまっています。
どうしてこのような現象が起きるのでしょうか？？
＃実際にはもう少し込み入ったコードですが、やりたいことはこんな感じです。
回答4件
0
ベストアンサー
jQuery.appendはノードを挿入するものであり、テキストを挿入するものではありません。
$("#test").append("<table>\n")が実行された場合、その時点でtableの閉じタグがセットで追加され、完結してしまいます。やりたいならtableのノードを作成してからまるごとappendするべきでしょう。
JavaScript
1var $node = $("<table></table>"); 2$node.append("<tr><th>項目１</th><th>項目２</th><th>項目３</th></tr>"); 3$("#test").append($node);
投稿2017/01/25 02:15
総合スコア9206
0
こんなふうにすると理解しやすいとおもいますよ
javascript
1<script> 2$(function(){ 3 $("#test").empty().append( 4 $('<table>').append( 5 $('<tbody>').append( 6 $('<tr>') 7 .append($('<th>').html('項目１')) 8 .append($('<th>').html('項目２')) 9 .append($('<th>').html('項目３')) 10 ) 11 ) 12 ) 13}); 14</script> 15<div id="test">hoge</div>
投稿2017/01/25 02:51
総合スコア114769
イメージ的には「$('<table>')」は
document.createElement('table')のような感じで
dom的な考え方をすれば閉じタグは不要です
masaya_ohashiさんはあくまでテキストを#testにappendしてるので
似たように見えますが、考え方は180度違います
（またテキストだとしても閉じタグはある程度まで省略可能です）
0
masaya_ohashiさんの回答で完結していますが、
私は視認しやすいように以下のように書きます。
もっと規模がでかくなったりするなら、
追加したいhtml(dom)を別ファイルで保存し、
テンプレートエンジン + ajaxで読み込んだりします。
さらに規模がでかくなるならReactやRiot等のライブラリという名のフレームワークを使用したりします。
ヒアドキュメントが標準で備われば、もっとキレイにかけるのでしょうね。
JavaScript
1$('#test').append( 2 '<table>' + 3 '<tr>' + 4 '<th>項目１</th>' + 5 '<th>項目２</th>' + 6 '<th>項目３</th>' + 7 '</tr>' + 8 '</table>' 9);
投稿2017/01/25 02:32
総合スコア882
やはり視認性は大事ですよね（特に後々）。
今の環境はリソースが豊かなのはわかっているのに、８ビット時代のクセが出て詰めに詰めてしまうことがまだあります(^^;;
0
$("#test").empty() .append("<table />") .find("table") .append("<tr><th>項目１</th><th>項目２</th><th>項目３</th></tr>") ;
とか
投稿2017/01/25 02:27
編集2017/01/25 02:29
総合スコア200
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/01/25 02:37