如何使用JavaScript获取并修改data属性中存储的HTML代码？

完全可行，核心逻辑是先把data属性存储的HTML字符串解析为游离DOM节点，之后所有操作和操作普通页面DOM没有区别，修改完成后按需插入页面或者回存到属性即可。

实现步骤 #

• 读取属性内的原始HTML字符串
  直接用原生datasetAPI读取即可，不需要额外转义处理，避免第三方工具自动修改字符串格式。

  // 拿到示例中的a标签元素
  const trigger = document.querySelector('a[data-type="video"]');
  // 读取data-video中存储的HTML字符串
  const htmlString = trigger.dataset.video;
  

• 把字符串解析为可操作的DOM结构
  优先用DOMParser解析，比传统的创建临时元素赋值innerHTML的方案更合理——解析过程不会提前加载字符串中的图片、视频等资源，不会产生无效的网络请求。

  const parser = new DOMParser();
  // 解析得到独立的Document对象，用法和全局document完全一致
  const vDoc = parser.parseFromString(htmlString, 'text/html');
  

• 执行常规DOM修改
  所有你熟悉的DOM API都可以正常使用，和操作页面上已有的元素没有差别：

  // 查找内部节点
  const video = vDoc.querySelector('#player');
  const source = video.querySelector('source');
  const wrapper = vDoc.querySelector('.wrapper');
  
  // 任意修改：改属性、改样式、加类名、绑定事件都可以
  video.dataset.poster = 'img/updated-poster.jpg';
  source.src = 'video/updated-source.mp4';
  wrapper.classList.add('custom-style');
  video.muted = true;
  

• 处理修改后的内容
  根据你的需求选对应操作即可：
  • 需要渲染到页面：直接把目标节点插入到页面对应位置，比如document.body.append(wrapper)
  • 需要存回data属性后续使用：把根节点序列化为字符串重新赋值，trigger.dataset.video = wrapper.outerHTML

避坑提醒 #

不要用下面这种老方法解析HTML字符串：

// 不推荐
const temp = document.createElement('div');
temp.innerHTML = htmlString;

这种写法在给innerHTML赋值的瞬间，浏览器就会开始加载字符串里的所有视频、图片资源，哪怕你从来没把这个temp元素插到页面上，会平白浪费流量。

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