javascript - 将 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] 而不是图像标签。

我的目标是在最后一个单元格中有一个包含图像的行和一个有效的点击处理程序。

请帮忙。

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 元素)添加到文档中。