为何无法用innerHTML将img元素的HTML内容转移到其他元素？

核心错误分析 #

• img元素不存在innerHTML属性
  HTML里的img是空元素（无闭合标签，无法包含子内容），它的innerHTML属性始终为空值。你给secElement.innerHTML赋值<img src='head.png'/>的操作完全无效，所以secElement.innerHTML返回空字符串。

• DOM元素变量被覆盖为字符串
  初始时firstElement是通过document.createElement('div')创建的DOM元素，但执行firstElement = secElement.innerHTML后，变量被替换成了空字符串。字符串不属于DOM元素类型，因此：

  • 调用setAttribute()会触发类型错误，因为字符串没有该方法；
  • 虽然document.body.append()支持传入字符串并转为文本节点，但空字符串不会在页面上产生任何可见内容。

修正后的代码示例 #

如果需要将图片元素放入div容器中，正确的写法如下：

// 创建div容器
let firstElement = document.createElement('div'); 
// 创建img元素
let secElement = document.createElement('img'); 
// 给img设置src属性
secElement.setAttribute('src', 'head.png');
// 将img元素添加到div内部
firstElement.appendChild(secElement);
// 将div添加到页面body中
document.body.append(firstElement);

如果想直接通过HTML字符串生成内容插入div，也可以使用insertAdjacentHTML：

let firstElement = document.createElement('div');
// 向div内部插入HTML字符串
firstElement.insertAdjacentHTML('beforeend', "<img src='head.png'/>");
document.body.append(firstElement);

内容的提问来源于stack exchange，提问作者Sam Lee