Javascript中不附加图像

Image not appending in Javascript

本文关键字:图像 Javascript      更新时间:2023-09-26

我是javascript的新手,我试图在div标签内添加一个img标签。但是它不与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>

但是我无法得到这个输出…

有谁能帮我修一下吗?

这一行

x[i].appendChild = commentHtml;

尝试将字符串赋值给元素的appendChild属性,该属性指向一个不能覆盖的函数。

如果你想用那个HTML替换元素的内容,赋值给innerHTML:

x[i].innerHTML = commentHtml;

如果你想添加到元素的当前内容,调用元素的insertAdjacentHTML方法:

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