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

Run details:

User agent: Mozilla/5.0 (Android 13; Mobile; rv:109.0) Gecko/119.0 Firefox/119.0

Browser: Firefox Mobile 119

Operating system: Android

Device Platform: Mobile

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));