将类添加到脚本/模板中的元素答案

【问题标题】：Add class to element inside script/template将类添加到脚本/模板中的元素
【发布时间】：2019-06-12 21:27:18
【问题描述】：

我有以下示例代码。我正在尝试在 javascript 代码中向 id="section" 添加一些类，但未成功。错误：删除注释代码时，无法读取 null 的属性“classList”。任何帮助将不胜感激！

第 1 部分：

var template = document.querySelector('#container').innerHTML;
var contents = '';
var section = document.createElement("div");

// These two lines cause the error
var section = document.getElementById("section");
section.classList.add("bg-yellow");

contents = template.replace(/\{\{title\}\}/, "Title");
section.insertAdjacentHTML('beforeend', contents);
document.getElementById('content').appendChild(section);

第 2 部分：（更新自 Randy Casburn 的原始答案）

var data = [{
"Title": "One"},
{"Title": "Two"},
{"Title": "Three"}];

var template = document.querySelector('#container').innerHTML;
var contents = '';
var section = document.createElement("div");

for(var i = 0; i < data.length; i++){
 contents += template.replace(/\{\{title\}\}/, data[i].Title);
}

section.innerHTML = contents;
var innerSection = section.querySelector("#section");
innerSection.classList.add("bg-yellow","blue");

document.getElementById('content').appendChild(section);

.sub-section{
  background: tomato;
  width: 100px;
}
.bg-yellow{
  background: yellow!important;
  width: 100%;
  height: auto;
}
.blue{
  color: blue!important;
}

<div id="content"></div>
<script type="template" id="container">
	<div id="section">
		<div class="sub-section">
			<h1>{{title}}</h1>
		</div>
	</div>
</script>

【问题讨论】：

您是说当您取消注释这些行时会发生错误吗？
@MTCoster 是的，没错
浏览器会忽略 <script type="template" /> 块内的所有内容。因此，在将其正确添加到 DOM 之前，您无法对其进行查询。您阅读了它，但从未将其添加到 DOM。
你不能把html放在脚本标签里
您可以在脚本标签中添加任何您想要的内容，但浏览器会将其解释为纯文本：stackoverflow.com/a/5679857/2831645

标签： javascript html

【解决方案1】：

这很容易实现。创建div 并将其innerHTML 设置为模板内容。然后将div 添加到 DOM。

您走在正确的轨道上，但只是跳过了重要的一步。

var data = [{
"Title": "One"},
{"Title": "Two"},
{"Title": "Three"}];

var template = document.querySelector('#container').innerHTML;
var contents = '';
for(var i = 0; i < data.length; i++){
 contents += template.replace(/\{\{title\}\}/, data[i].Title);
}

//var contents = template.replace(/\{\{title\}\}/, "Title");;
var section = document.createElement("div");
section.innerHTML = contents;
var innerSection = section.querySelectorAll(".section");
innerSection.forEach(el=>el.classList.add("bg-yellow"));
document.getElementById('content').appendChild(section);

.sub-section {
  background: tomato;
  width: 100px;
}

.bg-yellow {
  background: yellow!important;
  width: 100%;
  height: auto;
}

<div id="content"></div>
<script type="template" id="container">
  <div class="section">
    <div class="sub-section">
      <h1>{{title}}</h1>
    </div>
  </div>
</script>

编辑：OP 更改了问题中的用例，因此这会更新答案以反映新问题：-/

【讨论】：

您现在添加了两次。 section.innerHTML = template.replace(/\{\{title\}\}/, "Title"); 并且只需添加一次将是最有可能的方式。
@JavaScript - 谢谢这是一个疏忽。我会纠正的。
@K.C. - classList.add() 方法采用逗号分隔的类名列表来一次添加所有内容（如果这就是你的意思）。请参见示例中的第 23 行：developer.mozilla.org/en-US/docs/Web/API/Element/…
@RandyCasburn 谢谢。当有一组数据时，我想挑战这个解决方案。该类似乎仅适用于第一个元素。我将使用测试数据更新我上面的代码。请你看一下好吗？
@K.C. - 您无法使用当前模板执行此操作，因为您在模板中设置了 id 属性。从该模板创建多个元素时，您将复制不允许的 id 值（ID 必须是唯一的）。

【解决方案2】：

如果您在 Script 标签中指定了除 Javascript 以外的内容类型（或浏览器可以理解的其他脚本语言），浏览器不会对其进行解释，您可以将其作为纯文本访问。

参考(How does HTML tags work inside script tag?)

您没有放入脚本中的 html DOM，但您正在尝试对其进行查询。

【讨论】：