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代码的形式支付使用其中一个。

Answer 2

jQuery html（）是innerHTML而不是outerHTML。你想要后者。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

你想要输入的值，而不是内部的html。试试这个：

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

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

3 个答案: