Assuming system has following code in each index.html and module.js,
index.html
...
<head>
<script src="./module.js"></script>
</head>
<body>
<div id="background">
</div>
</body>
<script>
builder("background", "title" , "Hello");
builder("title", "text", "World");
</script>
module.js
function builder(ItemID, ChildID, Content) {
var Object = document.getElementById(ItemID);
Object.insertAdjacentHTML("beforeend", `
<div id="` + ChildID + `">
` + Content + `
</div>
`);
}
it will return
<div id="background">
<div id="title">
Hello
<div id="text">
World
</div>
</div>
</div>
Hereby, I am curious that is there any disadvantages of using only insertAdjacentHTML to build a page?
(Looks like insertAdjacentHTML is much faster then innerHTML or innerText thus I think there shouldn't be any problem, but questioning just because of curiousity)
The only thing the MDN page warns about are security considerations. Make sure that the HTMl comes from a trusted source.