動的に作成された要素の文字列表現を取得する方法

Question

文字列を生成してテーブルに追加することによってテーブル行を作成するJavaScriptコードがいくつかあります。このようなもの：

var str = '<tr><td>Column</td><!--More columns--></tr>'; 
$('#my-table').append(str); 

多くの属性を持つ行に1つの要素（入力）があります。これは長い文字列として読みにくいので、この特定の要素を別の方法で作成したいのですが、$()を使用し、属性として文書化されているようにオブジェクトとして渡します。here - それに上記の文字列を連結します。

var el = $('<input>', { 
 
\t type: 'text', 
 
\t name: 'some_name' 
 
}); 
 

 
var str = '<tr><td>test</td><td>'+el.html()+'</td></tr>'; 
 
$('#my-table').append(str);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<table id="my-table"> 
 

 
</table>

これは、（私が思った）表の2番目の列としてテキストボックスを作成する必要がありますが、それは動作しません。だから私はこのような何かをしようとしました。私はちょうど空のセルとエラーを取得します。私は間違って何をしていますか？または私は何をすべきですか？

Answer 1

jQuery html（）はinnerHTMLではなく、outerHTMLです。あなたは後者が欲しい。

var el = $('<input>', { type: 'text', name: 'some_name' }); 
 
var str = '<tr><td>test</td><td>'+ el[0].outerHTML +'</td></tr>'; 
 
$('#my-table').append(str);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<table id="my-table"></table>

Answer 2

内部HTMLではなく、入力からの値が必要です。あなたが本当にjQueryを使って複雑なHTMLを構築するべきではない、言われていること

var str = '<tr><td>test</td><td>'+el.val()+'</td></tr>'; 

Answer 3

var $input = $('<input>', { 
    type: 'text', 
    name: 'some_name', 
    /* ... more attributes ... */ 
}); 
var $tr = $("<tr>").appendTo('#my-table'); 
var $td = $("<td>").append($input).appendTo($tr); 

// possibly do other things with $input, $tr, and $td 

：これを試してみてください。扱いにくく、読めなくなり、最終的にはバグがあり、保守が難しいコードにつながります。 （それ以上にも、実際には文字列を連結してHTMLを構築するべきではありません）。

データ構造（オブジェクトの配列）を構築し、HTMLテンプレートライブラリで作業させます。そこから選ぶべき成熟したライブラリがかなりありますが、handlebars.jsは顕著なライブラリです。それは多くのクリーナーの1つを使用するJavaScriptコードの形で支払うでしょう。