如何将类添加到javascript中的html字符串中的元素？答案

【问题标题】：how to add class to an element in a html string in javascript?如何将类添加到javascript中的html字符串中的元素？
【发布时间】：2020-07-06 18:22:20
【问题描述】：

我有一个来自后端 API 的 html 字符串，我想为 html 字符串中的所有图像元素添加类，我可以使用 jQuery 来完成，但由于 jQuery 在服务器端渲染中不起作用，所以我正在寻找用于 javascript 中的解决方案。

这里是html字符串

let html="<p>here is a blog test<img src="https://bucket.s3.ap-south-1.amazonaws.com/83a5e290-8a8d-11ea-8466.jpg"></p>"

我想给图片元素添加类

任何帮助或建议将不胜感激。

【问题讨论】：

标签： javascript html jquery reactjs server-side-rendering

【解决方案1】：

我认为你可以使用 `` 反引号来构成你的内容，例如：

let html = `<p>here is a blog test<img src="https://bucket.s3.ap-south-1.amazonaws.com/83a5e290-8a8d-11ea-8466.jpg" class=${className}></p>`

【讨论】：

我正在从后端 api 获取 html 字符串，需要先提取图像标签来动态添加类
您能否解释一下您的意思？我不太明白您所说的“先提取电子邮件标签”是什么意思

【解决方案2】：

您可以使用DOMParser 来实现这一点，还有一种方法可以使用 str.replace 来实现，但它不是一种干净的方式，这是一个工作示例：

let html='<p>here is a blog test<img src="https://bucket.s3.ap-south-1.amazonaws.com/83a5e290-8a8d-11ea-8466.jpg"></p>'


parser = new DOMParser();
doc = parser.parseFromString(html, "text/html");

let images = doc.firstChild.getElementsByTagName('img');

for(let i =0; i<images.length; i++) {
  images[i].classList.add('img-element');
  console.log(images[i]);
}

【讨论】：

试过了，但是它抛出的 DOMParser 错误未在节点 js 服务器中定义
@punitdas，没有注意到 SSR 标签，我应该注意到了，DOMParser 不附带节点，所以你应该使用 npm 模块来检查 window.DOMParser 是否可用或不，请检查：stackoverflow.com/questions/11398419/…