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

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小提琴演示.

参考:

• appendChild().