Run results for: Fragment js createElement 56454

Run details:

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/135.0.0.0 Safari/537.36 Edg/135.0.0.0

Browser: Chrome 135

Operating system: Windows

Device Platform: Desktop

Date tested: one year ago

Test name	Executions per second
createFragment	57316.6 Ops/sec
createElement	103060.9 Ops/sec

Script Preparation code:

function createFragment(strHTML) {
    return document.createRange().createContextualFragment(strHTML);
}

function createElement(tagName, props) {
    const element = document.createElement(tagName);

    if (props) {
        if (typeof props === 'string') {
            element.className = props;
        }
        else {
            for (const key in props) {
                element[key] = props[key];
            }
        }

    }

    return element;
}

Tests:

createFragment
createFragment(` <div class="eventList"> <h3 class="Titleevent"> <span class="TitleeventLabel">Evento: </span> <span class="TitleeventId">${'id'} - </span> <span class="TitleeventName">${'name'}</span> </h3> <div class="mensagemlist"> <div class="mensagemlistBox"> <label class="mensagemlistBoxLabel">Deje un mensaje:</label> <textarea class="mensagemlistBoxInput" id="mensajeLimit"></textarea> <small id="sprestante"></small> </div> <div class="mensagemlistButtons"> <input type="submit" value="Guardar" class="btn-guardar"> <button class="btn-excluir">Esta compra no es un regalo</button> </div> </div> </div> `)
createElement
const title = createElement('h3', { className: 'Titleevent' }); title.appendChild(createElement('span', { className: 'TitleeventLabel', textContent: 'Evento: ' })); title.appendChild(createElement('span', { className: 'TitleeventId', textContent: `${'id'} - ` })); title.appendChild(createElement('span', { className: 'TitleeventName', textContent: 'name' })); const messageList = createElement('div', { className: 'mensagemlist' }); const listBox = createElement('div', { className: 'mensagemlistBox' }); listBox.appendChild(createElement('label', { className: 'mensagemlistBoxLabel', textContent: 'Deje un mensaje:' })); listBox.appendChild(createElement('textarea', { className: 'mensagemlistBoxInput', id: 'mensajeLimit' })); listBox.appendChild(createElement('small', { id: 'sprestante' })); const buttons = createElement('div', { className: 'mensagemlistButtons' }); buttons.appendChild(createElement('input', { type: 'submit', value: 'Guardar', className: 'btn-guardar' })); buttons.appendChild(createElement('button', { className: 'btn-excluir', textContent: 'Esta compra no es un regalo' })); messageList.appendChild(listBox); messageList.appendChild(buttons); const container = createElement('div', 'eventList') container.appendChild(title); container.appendChild(messageList);