Question

我无法使用其他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);
    };

Answer 1

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

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

我没有测试过，但为什么不坚持使用jQuery（尽管有些冗长的方法），因为你还在使用它：

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

JS Fiddle demo

参考：

appendChild()。

Answer 2

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

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

无法将图像对象与其他HTML元素放在一起

2 个答案: