html - Javascript Create and Add div vs Clone, Modify and Add div - Stack Overflow

admin管理员组

文章数量:1410705

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 ?

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 ?

• javascript
• html
• django

Share Follow edited May 24, 2013 at 12:16 Parin Porecha asked May 24, 2013 at 12:08 Parin PorechaParin Porecha 56355 silver badges1717 bronze badges 3

• I'm going to get hate for this, but you should seriously consider using a templating engine like Mustache or a data-binding library like KnockoutJS if you want to create massive amounts of HTML and add edit them to the page. Consider the plexity of changing the HTML page design in what you're suggesting. – Benjamin Gruenbaum Commented May 24, 2013 at 12:10
• @Benjamin, I have updated the question ( sorry, I forgot to mention that I am already using Django ). Thanks – Parin Porecha Commented May 24, 2013 at 12:18
• Django is a server side framework. I was talking about client side templating. I'm assuming server side templating is not an option in your case since you're getting JSON data from an AJAX call. – Benjamin Gruenbaum Commented May 24, 2013 at 12:19

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 2

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./a/13771168/1427878.)

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./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 bees greater the more plex the structure you want to clone is.

According to this, cloneNode is slightly better performance: http://jsperf./clonenode-vs-createelement-performance/2

However, I really do suggest you take a look at something like KnockoutJS: http://knockoutjs./examples/simpleList.html

It will save your sanity in the long run.

It's faster to clone the div.

Check out this performance test.

本文标签： htmlJavascript Create and Add div vs CloneModify and Add divStack Overflow