不能放置圖像對象與其他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 Fiddle demo

參考：

• appendChild()。

Answer 2

您在第一個示例中連接DOM對象和字符串。在第二個例子中，你只是把DOM對象放到表中 - 它不應該工作，因爲你缺少行和列，但瀏覽器必須是寬容的。

我會說要麼將圖像構建爲HTML字符串並將其附加爲原始數據，要麼將行和列構建爲DOM對象，但必須保持一致。