Question

我有以下示例代码。我正在尝试在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>

Answer 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更改了问题中的用例，因此这更新了答案以反映新问题：-/

Answer 2

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

refer（How does HTML tags work inside script tag?）

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

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

2 个答案: