如何用HTML模板替代JS中难维护的HTML字符串创建DOM元素？

1. 用模板字面量简化拼接 #

这是最直接的优化方式，用反引号包裹内容，支持换行和变量插值，可读性拉满：

const div = document.createElement('div');
const val = selected.val();
const text = selected.text();
// 直接写换行的HTML，样式也能内嵌
div.innerHTML = `
  <p id="${val}" style="color: #333; padding: 8px; border: 1px solid #eee;">
    ${text}
  </p>
`;
document.getElementById('pickedLingua').appendChild(div);

不用再拼一堆引号和加号，结构和样式一眼就能看明白。

2. 用原生<template>标签复用结构 #

适合复杂DOM结构，先在HTML里定义模板，再在JS里克隆填充数据：
首先在页面HTML中加模板：

<template id="linguaTemplate">
  <!-- 提前写好结构和默认样式 -->
  <p style="color: #333; padding: 8px; border: 1px solid #eee;"></p>
</template>

然后JS里操作：

// 获取模板并克隆内容
const template = document.getElementById('linguaTemplate');
const templateContent = template.content.cloneNode(true);
// 找到模板里的p元素，填充数据
const pElement = templateContent.querySelector('p');
pElement.id = selected.val();
pElement.textContent = selected.text();

document.getElementById('pickedLingua').appendChild(templateContent);

完全不用拼接HTML字符串，后续改结构直接改模板就行，维护成本低。

3. 纯DOM节点创建（无HTML字符串） #

如果担心XSS风险或者想完全用JS操作DOM，可以逐个创建节点并设置属性：

// 创建p元素并设置属性、样式
const pElement = document.createElement('p');
pElement.id = selected.val();
pElement.textContent = selected.text();
pElement.style.color = '#333';
pElement.style.padding = '8px';
pElement.style.border = '1px solid #eee';

// 创建div并插入p
const div = document.createElement('div');
div.appendChild(pElement);

// 插入到目标容器
document.getElementById('pickedLingua').appendChild(div);

这种方式完全脱离HTML字符串，虽然代码量稍多，但安全性和可控性更高。

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