'How do I dynamically append html snippets into the web page?
I have the following markup:
<div id="maincontainer">
<div id="mainMenu">
<div class="giver">
<hr class = "giver-hr">
<select class ="giver-subject"></select>
<select class ="giver-status"></select>
<label class = giver-isClient>
<input type = "radio">
<span>lorem ipsum</span>
</label>
</div>
<div class="giver">
<hr class = "giver-hr">
<select class ="giver-subject"></select>
<select class ="giver-status"></select>
<label class = giver-isClient>
<input type = "radio">
<span>lorem ipsum</span>
</label>
</div>
<div class="giver">
<hr class = "giver-hr">
<select class ="giver-subject"></select>
<select class ="giver-status"></select>
<label class = giver-isClient>
<input type = "radio">
<span>lorem ipsum</span>
</label>
</div>
<div class="giver">
<hr class = "giver-hr">
<select class ="giver-subject"></select>
<select class ="giver-status"></select>
<label class = giver-isClient>
<input type = "radio">
<span>lorem ipsum</span>
</label>
</div>
<div class="giver">
<hr class = "giver-hr">
<select class ="giver-subject"></select>
<select class ="giver-status"></select>
<label class = giver-isClient>
<input type = "radio">
<span>lorem ipsum</span>
</label>
</div>
<div class="giver">
<hr class = "giver-hr">
<select class ="giver-subject"></select>
<select class ="giver-status"></select>
<label class = giver-isClient>
<input type = "radio">
<span>lorem ipsum</span>
</label>
</div>
<div class="giver">
<hr class = "giver-hr">
<select class ="giver-subject"></select>
<select class ="giver-status"></select>
<label class = giver-isClient>
<input type = "radio">
<span>lorem ipsum</span>
</label>
</div>
<div class="giver">
<hr class = "giver-hr">
<select class ="giver-subject"></select>
<select class ="giver-status"></select>
<label class = giver-isClient>
<input type = "radio">
<span>lorem ipsum</span>
</label>
</div>
<div class="giver">
<hr class = "giver-hr">
<select class ="giver-subject"></select>
<select class ="giver-status"></select>
<label class = giver-isClient>
<input type = "radio">
<span>lorem ipsum</span>
</label>
</div>
</div>
<div id="legalDocument"></div>
</div>
, where the <div class="giver"> element is repeated multiple (9) times.
What is the best way to append such blocks dynamically, through for(){} cycle for example? The innerHtml property is not recommended from what I've heard. and using a special recursive function that I made doesn't seem to be the right way either.
What should I do? I'd like to extend my Web pages with templates kinda like how Javascript classes behave.
Solution 1:[1]
You can do this:
const giver = `
<div class="giver">
<hr class = "giver-hr">
<select class ="giver-subject"></select>
<select class ="giver-status"></select>
<label class = giver-isClient>
<input type = "radio">
<span>lorem ipsum</span>
</label>
</div>
`;
for (let i = 0; i < 9; i++) {
document.getElementById("mainMenu").insertAdjacentHTML("beforeend", giver);
}
Solution 2:[2]
I'd use HTML templates -- that's what they're for:
<html>
<head>
<template id="giver-template">
<div class="giver">
<hr class = "giver-hr">
<select class ="giver-subject"></select>
<select class ="giver-status"></select>
<label class = giver-isClient>
<input type = "radio">
<span>lorem ipsum</span>
</label>
</div>
</template>
</head>
<body>
<!-- document body -->
</body>
</html>
The contents of a template, a DocumentFragment, are available through accessing the content property on the template element itself; these contents, being a DocumentFragment, are in a convenient form, parsed and ready, and will not incur extra overhead the way innerHtml or insertAdjacentHTML would imply because of need to parse the markup and produce DOM objects for insertion into the document.
As you can observe, template elements are contained in the document head section, meaning they are not themselves rendered or are part of your document body otherwise -- their utility lies in being able to clone them and use their "instantiated" copies.
You can trivially use the template defined above for your use-case:
const new_giver_element = document.getElementById("giver-template").content.cloneNode(true);
Meaning that new_giver_element now refers to a new, unattached DOM node (a DocumentFragment) (which you can further modify if you so wish) ready for insertion into a document through appendChild or other methods.
Solution 3:[3]
you can use createElement and appendChild
<div id="maincontainer">
<div id="legalDocument">
</div>
</div>
var wrapper = document.querySelector("#mainMenu");
for(let i=0; i<9; i++) {
wrapper.appendChild(createBox());
}
function createBox() {
const giver = document.createElement("div");
giver.className = 'giver'
const givenHr = document.createElement("hr");
givenHr.className = 'giver-hr'
const giverSubject = document.createElement("select");
giverSubject.className = 'giver-subject'
const giverStatus = document.createElement("select");
giverStatus.className = 'giver-status'
const giverIsClient = document.createElement("label");
giverStatus.className = 'giver-isClient'
const input = document.createElement("input");
input.type = 'radio'
const span = document.createElement("span");
const text = document.createTextNode('lorem ipsum');
span.appendChild(text);
giverIsClient.appendChild(input);
giverIsClient.appendChild(span);
giver.appendChild(givenHr);
giver.appendChild(giverSubject);
giver.appendChild(giverStatus);
giver.appendChild(giverIsClient);
return giver;
}
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 | |
| Solution 2 | |
| Solution 3 |