如何修改JavaScript变量中存储的HTML字符串的元素类名与内容？

你遇到的问题本质是未挂载到页面文档树的DOM节点无法通过document.getElementById直接查询，可通过离线DOM操作实现需求，不需要把节点插入到可见页面中即可完成属性、内容修改，以下是两种可行方案：

方案1：使用DOMParser解析操作 #

DOMParser可以直接将HTML字符串解析为内存中的独立DOM文档，操作完成后再序列化为字符串，不会对当前页面产生任何影响：

// 你的原始HTML字符串
let myHTML= `<div id="type1-div"><p id="type1-lbl"> </p>\
                    <img id="type1-img" class="center stim" src="${myFolder}/photo${n}.png"></div>\
                    <div id="type2-div"><p id="type2-lbl"> </p>\
                    <img id = "type2-img" class="center stim" src="${myFolder}/photo${m}.png"</div>`;

// 1. 实例化解析器
const parser = new DOMParser();
// 2. 解析为内存DOM对象
const dom = parser.parseFromString(myHTML, 'text/html');

// 3. 按需操作DOM
dom.getElementById('type1-div').classList.add('top');
dom.getElementById('type1-lbl').textContent = 'TOP PARAGRAPH';
dom.getElementById('type2-div').classList.add('bottom');
dom.getElementById('type2-lbl').textContent = 'BOTTOM PARAGRAPH';

// 4. 转换回处理后的HTML字符串
const finalHTML = dom.body.innerHTML;

方案2：使用临时离线DOM节点操作 #

你也可以创建一个不挂载到页面的空白div作为临时容器，插入HTML字符串后直接操作：

const tempContainer = document.createElement('div');
// 把原始HTML写入临时容器
tempContainer.innerHTML = myHTML;

// 操作容器内节点
tempContainer.querySelector('#type1-div').classList.add('top');
tempContainer.querySelector('#type1-lbl').textContent = 'TOP PARAGRAPH';
tempContainer.querySelector('#type2-div').classList.add('bottom');
tempContainer.querySelector('#type2-lbl').textContent = 'BOTTOM PARAGRAPH';

// 获得处理后的HTML字符串
const finalHTML = tempContainer.innerHTML;

注意事项 #

• 两种方案都不会影响当前页面的DOM结构，所有操作都在内存中完成
• 原始字符串中保留原有模板变量${myFolder}、${n}等不会被篡改
• 操作完成后得到的finalHTML就是符合你预期的处理后字符串，可以直接插入到页面使用

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