Добавление сложного HTML динамически в div с помощью Javascript

Question

У меня есть веб-страница, в которой перечислены многие элементы (для конкретных фильмов), структура HTML каждого элемента в некотором роде большая и сложная (divs, images, links, CSS class , и т.д).

Во-первых, я загружаю 100 элементов, и у пользователя есть возможность загрузить следующие 100 (это делается с помощью бесконечного прокрутки): к настоящему времени я делаю петицию AJAX с запросом еще 100 элементов и отвечает текстом HTML (все они загружены), и я просто добавлю его в документ.

Но теперь я не хочу отвечать текстом HTML, вместо этого хочу ответить на 100 элементов данных в JSON (я могу это сделать), тогда мой вопрос: какой из них лучший способ добавить эти элементы в документ с помощью Javascript?

Я знаю, что я могу перебрать массив JSON и построить каждый элемент, но, как я уже сказал, это большая структура HTML, и я действительно не хочу создавать divs, а затем присоединяю его к другому div, задавая классы CSS , и т. д. с Javascript, потому что он может стать беспорядочным, грязным и очень большим ... Итак, есть ли способ в javascript для достижения этого, возможно, используя что-то вроде шаблонов? Как я могу это сделать? Я просто хочу получить чистый и лучший код.

Структура каждого фильма, как это (я могу использовать его как шаблон?):

<div data-section="movies" data-movie_id="myid" id="movie-id" class="movie anotherclass"> 
     <img src="myImageUrl"> 
     <div class="aCSSclass"> 
      <div class="aCSSclass"> 
       <div class="aCSSclass"></div> 
       <div class="aCSSclass"> 
        <div class="aCSSclass"> 
         Movie title 
        </div> 

        <div class="details form-group"> 
         <a class="aCSSclass" href="myHref">Details</a> 
         <button onclick="SomeFunction" class="aCSSclass">My button</button> 
         <div class="aCSSclass"><span class="icon star"></span><span class="aCSSclass"></span><span class="aCSSclass"></span><span class="aCSSclass"></span><span class="aCSSclass"></span></div> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 

Answer 1

Ответ сделать шаблон, а затем скопировать узел с помощью cloneNode(). Добавьте все клонированные узлы в documentFragment, чтобы сэкономить время на рисунке и, наконец, добавить его на страницу.

подход к этому:

var movies = {"movie1" : { "title" : "Die Hard", "imageurl" : "example.com/image.jpg", "details" : "http://example.com", "func" : "functionname" }, 
 
      "movie2" : { "title" : "Die Hard 2", "imageurl" : "example.com/image.jpg", "details" : "http://example.com", "func" : "functionname" }, 
 
      "movie3" : { "title" : "Die Hard With 3", "imageurl" : "example.com/image.jpg", "details" : "http://example.com", "func" : "functionname" } 
 
      }; 
 

 
function functionname() 
 
{ 
 
    alert("NYI"); 
 
} 
 

 
var keys = Object.keys(movies); //get the keys. 
 
var docFrag = document.createDocumentFragment(); 
 
for (var i = 0; i < keys.length; i++) 
 
{ 
 
    var tempNode = document.querySelector("div[data-type='template']").cloneNode(true); //true for deep clone 
 
    tempNode.querySelector("div.title").textContent = movies[keys[i]].title; 
 
    tempNode.querySelector("img").src = movies[keys[i]].imageurl; 
 
    tempNode.querySelector("button").onclick = window[movies[keys[i]].func]; 
 
    tempNode.querySelector("a").href = movies[keys[i]].details; 
 
    tempNode.style.display = "block"; 
 
    document.body.appendChild(tempNode); 
 

 
} 
 
document.body.appendChild(docFrag); 
 
delete docFrag;

<!-- template --> 
 
<div style="display: none" data-type="template" data-section="movies" data-movie_id="myid" id="movie-id" class="movie anotherclass"> 
 
     <img src="myImageUrl"> 
 
     <div class="aCSSclass"> 
 
      <div class="aCSSclass"> 
 
       <div class="aCSSclass"></div> 
 
       <div class="aCSSclass"> 
 
        <div class="aCSSclass title"> 
 
         Movie title 
 
        </div> 
 

 
        <div class="details form-group"> 
 
         <a class="aCSSclass" href="myHref">Details</a> 
 
         <button onclick="SomeFunction" class="aCSSclass">My button</button> 
 
         <div class="aCSSclass"><span class="icon star"></span><span class="aCSSclass"></span><span class="aCSSclass"></span><span class="aCSSclass"></span><span class="aCSSclass"></span></div> 
 
        </div> 
 
       </div> 
 
      </div> 
 
     </div> 
 
    </div>

Это просто пример, не основанный на ваш фактический формат JSON. Однако вы можете легко клонировать шаблон, а затем заполнять значения.

Использование

• document.querySelector
• document.querySelectorAll
• document.createDocumentFragment
• Element.cloneNode (BOOL)