Каков наиболее эффективный способ создания вложенных div в Javascript?

Question

По существу, я пытаюсь воссоздать этот код:

<div class="row" style="-moz-border-radius: 18px 18px 18px 18px; -webkit-border-radius: 18px; border-radius: 18px 18px 18px 18px; background-color:white; margin-bottom:20px"> 
    <div class="col-lg-12"> 
     <div class="row" style="margin-bottom:10px;"> 
      <div class="col-xs-6"> 
       <center><font size="6">Content</font></center> 
      </div> 
      <div class="col-xs-6"> 
       <center>Content</center> 
      </div> 
     </div> 
     <div class="row" style="margin-bottom:10px;"> 
      <div class=" col-xs-4" style="text-align: right;"> 
       <font size="3"><b>Content</b></font> 
      </div> 
      <div class="col-xs-8"> 
       <font size="3">Content</font> 
      </div> 
     </div> 
     <div class="row" style="margin-bottom:10px;"> 
      <div class="col-xs-4" style="text-align: right;"> 
       <font size="3"><b>Content</b></font> 
      </div> 
      <div class="col-xs-8"> 
       <font size="3">Content</font> 
      </div> 
     </div> 
     <div class="row" style="margin-bottom:10px;"> 
      <div class="col-xs-4" style="text-align: right;"> 
       <font size="3"><b>Content</b></font> 
      </div> 
      <div class="col-xs-8"> 
       More Content 
      </div> 
     </div> 
     <button class="btn btn-primary btn-lg btn-block" style="margin-bottom:15px">Launch GPS!</button> 
    </div> 
</div> 

генерировать каждый раз, когда я вхожу больше информации, которая заполняется в места выше отмеченного «содержания».

Моя проблема не в написании javascript, чтобы добавить данные так же сильно, как при создании каждого кода при каждом вводе данных.

Моя мысль о том, как решить эту проблему, заключалась в создании отдельных переменных, таких как: (это все внутри функции, которая вызывается для возврата законченного var со всеми этими предполагаемыми переменными, сгруппированными в цепочку функций appendChild)

var divDisplay = document.createElement('div'); 
divDisplay.className = 'row'; 
description.setAttribute("style", "-moz-border-radius: 18px 18px 18px 18px; -webkit-border-radius: 18px; border-radius: 18px 18px 18px 18px; background-color:white; margin-bottom:20px;"); 

..то делать AppendChild() требует дальнейшей реализации .. как так:

var divDisplay2 = document.createElement('div'); 
divDisplay2.className = 'col-lg-12'; 
divDisplay.appendChild(
    divDisplay.appendChild(divDisplay2) 
); 

Но в конечном итоге я получаю ошибки, пытаясь разместить больше содержания в тех присоединять ребенка.

Есть ли лучший способ? Быстрее? Могли бы вы мне сказать, что бы вы сделали, чтобы закодировать это?

Answer 1

Есть много способов кожи этого кота, но в зависимости на сколько вы это делаете, создавая скрытый шаблон и вставляя это, вероятно, самый простой вариант. Просто добавьте скрытый блок на свой DOM

<div id="template" class="hidden"> 
    <div class="row" style="margin-bottom:10px;"> 
     <div class="col-xs-4" style="text-align: right;"> 
      <font class="contentHeading" size="3"><b>{ContentHeading}</a></font> 
     </div> 
    <div class="col-xs-8"> 
     <font class="contentText" size="3">{ContentText}</font> 
    </div> 
</div> 

Затем вытащить HTML из шаблона и вставить текст

var parentDiv = document.getElementById('someDiv'); 
var myTemplate = document.getElementById('template'); 
var newRowHtml = myTemplate.innerHTML.replace('{ContentHeading}', heading).replace('{ContentText}', text); 
document.getElementById('someDiv').innerHTML += newRowHtml; 

Обратите внимание, что с помощью строки функции замены не может быть лучшим вариантом, если вы имеют большой шаблон.

Альтернативно, если вы собираетесь вставлять много контента, вам может быть лучше использовать библиотеку шаблонов. Есть много на выбор, но код Handlebars, например, будет выглядеть примерно так.

var templateSource = document.getElementById("row-template").innerHTML; 
var template = Handlebars.compile(templateSource); 

Затем, когда вы хотите, чтобы вставить строку просто использовать

var newRowHtml = template({ 
    heading: heading, 
    text: text 
}); 
document.getElementById('someDiv').innerHTML += newRowHtml; 

Answer 2

Я бы спрятал основной элемент div где-то в html (очень похожим на шаблон), и когда пользователь вызывает изменение, контейнер div может быть прочитан/повторно использован любым селектором и помещен в нужное положение на $(desiredPlace).html(container). Это суждение не приводит к воссозданию вложенных дивизий на самом деле.

с чистыми ЯШ: http://jsfiddle.net/c2jghmvk/

Answer 3

Использование чистого JavaScript, вы можете попробовать с innerHTML так:

document.getElementById("parent").onclick= 
 
function appendEl(){ 
 
    var parent = document.getElementById("parent"); 
 
    parent.innerHTML += "<div class='yourClass'> child </div>"; 
 
}

#parent{ 
 
    border: 1px solid blue; 
 
}

<div id="parent" > click to add child in parent </div>