Run results for: Imperative DOM vs innerHTML vs <template>

Run details:

User agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/98.0.4758.80 Safari/537.36

Browser: Chrome 98

Operating system: Linux

Device Platform: Desktop

Date tested: 2 years ago

HTML Preparation code:

<template id="template">
    <div>
        <p class="font-bold">Hello!</p>
    </div>
</template>
<output id="output"></output>

Script Preparation code:

output.replaceChildren();

Tests:

innerHTML
output.innerHTML += ` <div> <p class="font-bold">Hello!</p> </div>`;
Imperative DOM
const div = document.createElement('div'); const p = document.createElement('p'); p.classList.add('font-bold'); p.textContent = 'Hello!'; div.appendChild(p); output.appendChild(div);
<template>
output.appendChild(template.content.cloneNode(true));