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

Run details:

User agent: Mozilla/5.0 (X11; Linux x86_64; rv:109.0) Gecko/20100101 Firefox/112.0

Browser: Firefox 112

Operating system: Linux

Device Platform: Desktop

Date tested: one year 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));