0

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)

Undefined
  • 11
  • 4
  • Which difference are you asking for? The difference between [`insertAdjacentHTML`](//developer.mozilla.org/en/docs/Web/API/Element/insertAdjacentHTML) and _frameworks_ (which one?), between `insertAdjacentHTML` and [`innerHTML`](//developer.mozilla.org/en/docs/Web/API/Element/innerHTML), or the one between `insertAdjacentHTML` and [`innerText`](//developer.mozilla.org/en/docs/Web/API/HTMLElement/innerText)? Also, your ` – Sebastian Simon Jun 07 '23 at 10:07
  • @SebastianSimon Thanks for the comment. I have edited the post! Basically I was curious whether it is possible to build a page using only insertAdjacentHTML without any performance demerits. – Undefined Jun 07 '23 at 10:11
  • 1
    I think you maybe asking the wrong question. The issue won't necessarily be the DOM methods you choose to use but _how_ you're using them. Building a page using your method will be less performant than, for example, using a [document fragment](https://developer.mozilla.org/en-US/docs/Web/API/Document/createDocumentFragment) to create your page structure, and then attaching that fragment to the DOM in one go. – Andy Jun 07 '23 at 10:25
  • @Andy Noted. In that sense rather than vulnerability of XSS, is there any disadvantages of using only insertAdjacentHTML? – Undefined Jun 07 '23 at 10:30
  • Based on your example I don't see any danger of XSS. – Andy Jun 07 '23 at 10:39

1 Answers1

0

The only thing the MDN page warns about are security considerations. Make sure that the HTMl comes from a trusted source.

pjaoko
  • 61
  • 5