title: Javascript Create and Add div vs Clone, Modify and Add div
body: <p>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 <a href="http://i.imgur.com/BnKJspX.png" rel="nofollow">this</a>, has to be added to the body. So, I have 2 methods of creating it -</p>
  
  <ol>
  <li><p>Clone the code skeleton shown below ( using cloneNode() ),
  Use something like <code>div.childNode[3].childNode[1].textContent = "Task Name"</code> to update each text in it,
  Append it to the parent ( using parent.appendChild() )</p></li>
  <li><p>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.</p></li>
  </ol>
  
  <p>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 ?</p>
  
  <pre><code>&lt;div class="task-row min-width900" id="task_row" style="display: none"&gt;
      &lt;div class="div-inline pull-left min-width25" style="margin-left: 5px"&gt;
          &lt;input type="checkbox" class="checkbox" id="task_row_checkbox"&gt;
      &lt;/div&gt;
  
      &lt;div class="div-inline pull-left min-width30" style="margin-right: 2px; border-right: 1px solid #dedede;"&gt;
          &lt;a data-toggle="collapse" data-target="#collapse11" href="#" style="text-decoration:none; color:#4d4d4d; font-size: 20px;" id="subtask_count"&gt;
              +2
          &lt;/a&gt;
      &lt;/div&gt;
  
      &lt;div class="dropdown div-inline pull-left min-width300" style="width: 26%;"&gt;
          &lt;a class="dropdown-toggle" data-toggle="dropdown" href="#" style="text-decoration:none; color:#4d4d4d; font-size: 15px;" id="name_link"&gt;
          &lt;strong id="name"&gt;Summer's here: Lets clean the house&lt;/strong&gt;
          &lt;/a&gt;
          &lt;ul class="dropdown-menu" role="menu" aria-labelledby="dLabel"&gt;
              &lt;li&gt;&lt;a href="#"&gt;&lt;i class="icon-ok"&gt;&lt;/i&gt;&amp;nbsp;Done&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;&lt;i class="icon-minus-sign"&gt;&lt;/i&gt;&amp;nbsp;Dismissed&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;&lt;i class="icon-trash"&gt;&lt;/i&gt;&amp;nbsp;Delete&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
  
      &lt;div style="width: 15%;" class="div-inline min-width200 task-tags" id="tags"&gt;
          &lt;a href="#" style="text-decoration:none"&gt;
              &lt;span class="label label-important"&gt;Work&lt;/span&gt;
          &lt;/a&gt;
          &lt;a href="#" style="text-decoration:none"&gt;
              &lt;span class="label label-warning"&gt;Downtown&lt;/span&gt;
          &lt;/a&gt;
      &lt;/div&gt;
  
      &lt;div class="div-inline task-description" style="width: 32%"&gt;
          &lt;a href="#" style="text-decoration:none"&gt;
              &lt;span class="muted" id="description"&gt;It's that time of the year again ...&lt;/span&gt;
          &lt;/a&gt;
      &lt;/div&gt;
  
      &lt;div style="width: 10%" class="div-inline min-width130 pull-right"&gt;
          &lt;a href="#" style="text-decoration:none; color:#4D4D4D;"&gt;
              &lt;strong style="font-size: 30px;" id="due_date"&gt;13.09.12&lt;/strong&gt;
          &lt;/a&gt;
      &lt;/div&gt;
  
      &lt;div style="width: 10%" class="div-inline min-width80 pull-right"&gt;
          &lt;a href="#" style="text-decoration:none; color:#4d4d4d;"&gt;
              &lt;strong id="start_date"&gt;2 days ago&lt;/strong&gt;
          &lt;/a&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Thanks</p>
  
  <p>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 <code>{% for loop %}</code> be used to add the task-rows to the page ?</p>