不能将图像对象与其他HTML元素放在一起

Can't place image object with other HTML elements

本文关键字：HTML 元素 在一起 其他 图像 对象 不能      更新时间：2023-09-26

我不能将图像对象与其他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);
    };

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

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

我没有测试过，但为什么不坚持使用jQuery(尽管有点冗长的方法)，因为您无论如何都在使用它:

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

JS Fiddle demo.

参考:

  • appendChild() .

在第一个示例中，您正在连接一个DOM对象和一个字符串。在第二个示例中，您只将DOM对象放入表中—它不应该工作，因为您丢失了行和列，但浏览器必须原谅。

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

相关文章：