将jQuery元素附加到包含html的字符串

Question

我有一个jQuery包装元素,我想附加到一个HTML行.我无法绕过这个,因为append()看似接受字符串而不是现有的jQuery元素(我可能会在这里弄错).我有以下设置:

var row='<tr><td>data1</td><td>data2</td><td>';
var img=$('<img src="path/to/img.png"');
img.click(myClickHandler);

现在我要做的是将这个img元素追加到我的行中并使用结束标记'关闭'该行.我这样做是这样的:

var jRow=$(row);
jRow.append(img);
jRow.append('</td></tr>');

我的行准备就绪后,我将它附加到我的桌子上:

$('#tableId').append(jRow);

好吧,以上所有都不起作用,因为我在添加的行中得到了[Object Object]而不是image标签.

我的目标是在最后一个单元格中创建一个包含图像的行,并使用一个有效的单击处理程

请帮忙.

Answer 1

当你传递一个字符串时,append()它首先被"转换"为一个DOM元素/集合.因此,您传递给的每个字符串都append()必须是有效的HTML/XHTML; 你以后不能添加一些字符串.即使您事先关闭标记,图像仍可以附加到表格行.例如

var row='<tr><td>data1</td><td>data2</td><td></td></tr>';
var img=$('<img src="path/to/img.png"/>');
img.click(myClickHandler);

var jRow = $(row);
$('td:last', jRow).append(img);

当你通过什么append()或html()或prepend()(或其他类似方法)试图约串忘记; 你刚刚传递的不再是一个字符串; 它已被解析为HTML,并已作为DOM元素(或许多DOM元素)添加到文档中.