如何向模板字面量创建的嵌套DOM元素注入内容？

一、定位嵌套DOM元素注入数据 #

方法1：临时容器中转定位 #

如果需要先构建DOM结构再注入数据（比如数据是异步获取的），可以用一个临时div作为容器承载模板HTML，之后通过querySelector精准定位目标元素：

// 构建嵌套DOM的模板字符串
const domTemplate = `
  <div class="wrapper">
    <div class="one" data-id="123">
      <div class="two">
        <div class="three"></div>
      </div>
    </div>
  </div>
`;

// 创建临时容器解析HTML
const tempDiv = document.createElement('div');
tempDiv.innerHTML = domTemplate;

// 定位到.three元素并注入数据
const targetElement = tempDiv.querySelector('.three');
targetElement.textContent = someOutputData; // 或用innerHTML、appendChild等

// 将处理好的DOM插入页面（只取wrapper，丢弃临时div）
document.body.appendChild(tempDiv.firstElementChild);

方法2：模板字面量直接插值 #

如果数据已经准备就绪，最简洁的方式是直接在模板里用${}插值，跳过事后定位步骤：

const domTemplate = `
  <div class="wrapper">
    <div class="one" data-id="123">
      <div class="two">
        <div class="three">${someOutputData}</div>
      </div>
    </div>
  </div>
`;

// 直接插入页面
document.body.insertAdjacentHTML('beforeend', domTemplate);

二、省略不必要的外层wrapper容器 #

完全可以去掉多余的外层wrapper，直接操作目标嵌套结构，有两种方式：

方式1：直接插入无外层的DOM结构 #

如果数据已准备好，直接用模板字面量写核心结构并插值：

const domTemplate = `
  <div class="one" data-id="123">
    <div class="two">
      <div class="three">${someOutputData}</div>
    </div>
  </div>
`;
document.body.insertAdjacentHTML('beforeend', domTemplate);

方式2：临时容器处理后移除非外层元素 #

如果需要先操作元素再插入，同样用临时容器，最后把内部元素全部移到目标位置，再销毁临时容器：

const domTemplate = `
  <div class="one" data-id="123">
    <div class="two">
      <div class="three"></div>
    </div>
  </div>
`;

const tempDiv = document.createElement('div');
tempDiv.innerHTML = domTemplate;

// 定位并注入数据
const targetElement = tempDiv.querySelector('.three');
targetElement.textContent = someOutputData;

// 将临时容器内的所有子元素转移到页面
while (tempDiv.firstChild) {
  document.body.appendChild(tempDiv.firstChild);
}
// 移除空的临时容器
tempDiv.remove();

问题原因说明 #

你之前遇到数据跑到外层wrapper的情况，大概率是没有精准定位到.three元素，而是直接给外层wrapper添加了内容（比如wrapper.textContent = someOutputData），导致数据被插入到wrapper的所有子元素之外。只要确保操作的是querySelector找到的.three元素，就能解决这个问题。

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