0

我无法将图像对象与其他 HTML 元素一起放置在 DOM 上。例如：

$('#preview> tbody:last')[0].appendChild('<tr><td>' + image + '</td></tr>');

这行不通。什么都没有出现。但是，当我只使用图像时，它会显示在屏幕上：

$('#preview> tbody:last')[0].appendChild(image);

为什么这行不通？在我看来，它应该以任何一种方式工作。我尝试使用只是append但没有任何效果 - 图像本身或其他元素。

全码位

var reader = new FileReader();
    reader.onload = function (event) {
        var image = new Image();
        image.src = event.target.result;
        image.width = 50;
        $('#preview> tbody:last')[0].appendChild(image);
    };
4

2 回答 2

6

您面临的问题是appendChild()需要一个节点（或节点引用），而不是 HTML 字符串。

要使用字符串，请使用innerHTML()（但请记住，这会重写/覆盖相关元素中的任何现有 HTML（因此会丢失绑定到现有 HTML 的任何事件）。

我没有测试过，但为什么不坚持使用 jQuery（尽管方法有点冗长），因为无论如何你都在使用它：

$('#preview> tbody:last').append('<tr><td></td></tr>').find('td').append(image);

JS 小提琴演示。

参考：

于 2013-06-04T18:54:29.840 回答
0

您在第一个示例中连接了一个 DOM 对象和一个字符串。在您的第二个示例中，您只是将 DOM 对象放入表中 - 它不应该工作，因为您缺少行和列，但浏览器必须宽容。

我会说要么将图像构建为 HTML 字符串并将其附加为原始字符串，要么将行和列构建为 DOM 对象，但您必须保持一致。

于 2013-06-04T18:55:20.843 回答