Question

我是javascript新手，我試圖在div標籤內附加一個img標籤。 ，但它不是concateating div中已有的元素。

這是我的HTML代碼：

<div class="ce_label"> 
     <span>some text</span> 
     <span>some text</span> 
    </div> 

我的JavaScript代碼：

var sel = '.ce_label'; 
    var toolTemplate = [ 
    '<img src="smiley.gif" alt="Smiley face" height="42" width="42">' 
    ]; 
    window.onload = function() { 
    var x = document.querySelectorAll(sel); 
    var commentHtml = toolTemplate.join(''); 
    for (var i = 0; i < x.length; i++) { 
    x[i].appendChild = commentHtml; 
    } 

    }; 

所以我的輸出應該是：

<div class="ce_label"> 
     <img src="smiley.gif" alt="Smiley face" height="42" width="42"> 

     <span>some text</span> 
     <span>some text</span> 
    </div> 

但我不能得到這個輸出..

任何人都可以hel我解決它？

在此先感謝。

Answer 1

此行

x[i].appendChild = commentHtml; 

嘗試分配一個字符串元素的appendChild屬性，它指的是，你不能覆蓋的功能。

如果您要更換的元素與HTML內容，分配給innerHTML：

x[i].innerHTML = commentHtml; 

如果您要附加到元素的CURENT內容，調用元素的insertAdjacentHTML方法：

x[i].insertAdjacentHTML("beforeend", commentHtml);