Add class to element inside script/template

Question

I have the following sample codes. I'm trying to add some class to the id="section" inside the javascript code but unsuccessful. Error: Cannot read property 'classList' of null when removing the commented codes. Any helps would be greatly appreciated!

Part 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);

Part 2: (Updated from Randy Casburn's orig answer)

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

This is quite simple to accomplish. Create the div and set its innerHTML as the template contents. Then add the div to the DOM.

You were on the right track, but just skipped the one vital step.

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>

EDIT: OP changed the use case in the question, so this updates the answer to reflect the new question :-/

Answer 2

If you specify a content type other than Javascript in Script tags (or another scripting language that the browser understands), it will not be interpreted by the browser, and you can just access it as plain text.

refer( How does HTML tags work inside script tag? )

you do not have the html DOM that you put in you script but you are trying to query on it.