Javascript Create and Add div vs Clone, Modify and Add div

Question

I want to dynamically add divs to my html page. The server sends a list containing the name, description, dates etc. for a task. For each task, a div looking like this, has to be added to the body. So, I have 2 methods of creating it -

1. Clone the code skeleton shown below ( using cloneNode() ), Use something like div.childNode[3].childNode[1].textContent = "Task Name" to update each text in it, Append it to the parent ( using parent.appendChild() )

2. Create a div ( using createElement() ), Add classes and styles to it, Add children containing task name, description, dates etc. to it, Append it to the parent.

Considering that the list server is going to send can contain up to 100 tasks, so performance wise which method is better ? Also, are there other ways to do so ?

<div class="task-row min-width900" id="task_row" style="display: none">
    <div class="div-inline pull-left min-width25" style="margin-left: 5px">
        <input type="checkbox" class="checkbox" id="task_row_checkbox">
    </div>

    <div class="div-inline pull-left min-width30" style="margin-right: 2px; border-right: 1px solid #dedede;">
        <a data-toggle="collapse" data-target="#collapse11" href="#" style="text-decoration:none; color:#4d4d4d; font-size: 20px;" id="subtask_count">
            +2
        </a>
    </div>

    <div class="dropdown div-inline pull-left min-width300" style="width: 26%;">
        <a class="dropdown-toggle" data-toggle="dropdown" href="#" style="text-decoration:none; color:#4d4d4d; font-size: 15px;" id="name_link">
        <strong id="name">Summer's here: Lets clean the house</strong>
        </a>
        <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
            <li><a href="#"><i class="icon-ok"></i>&nbsp;Done</a></li>
            <li><a href="#"><i class="icon-minus-sign"></i>&nbsp;Dismissed</a></li>
            <li><a href="#"><i class="icon-trash"></i>&nbsp;Delete</a></li>
        </ul>
    </div>

    <div style="width: 15%;" class="div-inline min-width200 task-tags" id="tags">
        <a href="#" style="text-decoration:none">
            <span class="label label-important">Work</span>
        </a>
        <a href="#" style="text-decoration:none">
            <span class="label label-warning">Downtown</span>
        </a>
    </div>

    <div class="div-inline task-description" style="width: 32%">
        <a href="#" style="text-decoration:none">
            <span class="muted" id="description">It's that time of the year again ...</span>
        </a>
    </div>

    <div style="width: 10%" class="div-inline min-width130 pull-right">
        <a href="#" style="text-decoration:none; color:#4D4D4D;">
            <strong style="font-size: 30px;" id="due_date">13.09.12</strong>
        </a>
    </div>

    <div style="width: 10%" class="div-inline min-width80 pull-right">
        <a href="#" style="text-decoration:none; color:#4d4d4d;">
            <strong id="start_date">2 days ago</strong>
        </a>
    </div>
</div>

Thanks

Update: I am using Django framework for this application ( the task row is a part of it ). So, is adding divs via JS better performance-wise or should Django's {% for loop %} be used to add the task-rows to the page ?

Answer 1

I agree that a JS templating engine might be the best solution.

---

As for performance, if you still want to do it on your own, regardless of whether you choose to clone or create, most important thing for doing that for 100 items in a loop is, don’t append each element to the document inside the loop, but use a DocumentFragment instead: Append the divs to the fragment, one after another, and after you are done with looping through your items append the fragment, that now contains all of those 100 items, to your document.

(A DocumentFragment is just a “soulless” temporary container – when you finally append the fragment to the document, it will just “dissolve” without leaving a trace, so the effect will be the same as if you had appended the 100 elements individually. As to why it improves performance, see https://stackoverflow.com/a/13771168/1427878.)

Answer 2

In my current project I'm dynamically creating about 600 elements, each with about 10 nested children. They're mostly identical aside from a text node and an src attribute of an image. The best pure-JS way I've found to create and modify these elements takes 10-15ms and works as follows:

1. Create a DocumentFragment.
2. Use the fragment to build a template.
3. Deep clone the fragment.
4. Modify the clone.
5. Create the actual root element.
6. Append the clone to the root element.

Repeat 3-6 as many times as necessary.

According to my tests on Chrome 66/Windows (https://jsperf.com/creating-multiple-nested-elements/1), this is about 10x faster than creating each element from scratch, and about 3x faster than using a non-DocumentFragment as the template root. I would imagine that the benefit becomes greater the more complex the structure you want to clone is.