JS为innerHTML内嵌的img元素添加class类名失败，如何解决？

• 操作对象类型完全错误：element.innerHTML 是用于读写元素内部HTML内容的字符串属性，本身不是DOM节点，对字符串设置className、调用DOM专属方法都是无效操作
• 目标是给内嵌的<img>标签加类名，必须拿到这个img对应的DOM节点进行操作，不能直接操作innerHTML返回的字符串

方式1：拼接HTML字符串时直接写入类名 #

最简洁直接，适合动态生成HTML内容时提前把类名写进标签里：

var el = document.createElement("a");
el.href = `/${someurl}/`;
// 直接在img标签的HTML字符串中嵌入class属性
el.innerHTML = `<img src="${someimg}" class="testclassimage"></img>`;

方式2：插入DOM后查找img节点再添加类 #

适合HTML内容是固定模板、不方便拼接类名的场景：

var el = document.createElement("a");
el.href = `/${someurl}/`;
el.innerHTML = `<img src="${someimg}"></img>`;
// 通过DOM选择器定位到a标签内的img元素，添加类名
el.querySelector("img").classList.add("testclassimage");

方式3：按子节点索引定位img元素 #

如果确定a标签下第一个子元素就是目标img，也可以直接取子节点操作：

var el = document.createElement("a");
el.href = `/${someurl}/`;
el.innerHTML = `<img src="${someimg}"></img>`;
const targetImg = el.children[0];
targetImg.classList.add("testclassimage");

这个方法是DOM节点专属的API，本身不存在于字符串原型上，你之前调用的el.innerHTML.insertAdjacentHTML(...)本质是在字符串实例上调用DOM方法，自然不会有任何效果。如果要用这个API给元素新增内容，正确的调用逻辑是通过DOM节点本身触发，例如：

// 正确示例：给a标签开头位置插入一段带类名的内容
el.insertAdjacentHTML("afterbegin", '<span class="testclass">前置内容</span>')

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