javascript - 如何获取动态创建元素的字符串表示

Question

所以我有一些 JavaScript 代码，通过生成字符串并将其附加到表中来创建表行。像这样的事情:

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

该行中有一个元素(输入)具有很多属性。作为一个长字符串很难阅读，因此我想以不同的方式创建这个特定元素 - 使用 $() 并将属性作为对象传递，如文档 here 所示。 - 然后将其与上面的字符串连接起来。所以我尝试做这样的事情:

var el = $('<input>', {
	type: 'text',
	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>

这应该(我认为)创建一个文本框作为表中的第二列，但它不起作用。我只是得到一个空单元格，没有错误。我究竟做错了什么？或者我该怎么办？

Answer 1

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

话虽如此，您确实不应该使用 jQuery 构建复杂的 HTML。它很麻烦，会导致代码不可读，最终出现错误，难以维护。 (更重要的是，您确实不应该通过连接字符串来构建 HTML。)

构建一个数据结构(对象数组)，然后让 HTML 模板库完成这项工作。有很多成熟的库可供选择，handlebars.js 是其中最著名的一个。使用其中之一会以更更干净的Javascript代码的形式付出代价。