使用Javascript将复杂的HTML动态添加到div中

Question

我有一个网页，列出了许多元素（具体来说是电影），每个项目的HTML结构都比较大和复杂（div、图片、链接、CSS类等）。

首先我加载100个元素，用户可以选择加载下一个100个（这是使用无限滚动实现的）：现在，我通过AJAX请求另外100个元素，并响应一个HTML文本（将所有元素都加载），然后将其附加到文档中。

但是，现在我不想用HTML文本作为响应，而是想用JSON响应100个元素数据（我可以做到），那么我的问题是：使用Javascript添加这些元素的最佳方法是什么？

我知道可以循环遍历JSON数组并构造每个元素，但正如我所说，它是一个庞大的HTML结构，我真的不想使用Javascript创建div，然后将其附加到另一个div中，设置CSS类等，因为它可能会变得混乱、杂乱无章且非常庞大...那么，在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>

- Sredny M Casanova

---

请查看文档片段。 - Mouser

你可以手动生成所有内容（使用dom），克隆以前的电影并相应更改数据（jquery .clone()），或者使用像handlebars这样的模板库。 - juvian

@juvian 我喜欢这种方式（克隆），这样我只能将结构隐藏并复制->填充它->附加它。谢谢！ - Sredny M Casanova

你能发一下 JavaScript 部分吗？你使用 innerHTML 吗？ - pdem

@pdem，JavaScript 部分只是一个 AJAX 请求，然后我接收 HTML 并将其附加到相应的 div 中。但现在我想要接收 JSON 而不是 HTML。目前这是我拥有的唯一东西，没有项目的具体信息。 - Sredny M Casanova

你可以考虑Angular，它完全满足你的模板需求。 - pdem

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";
  docFrag.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)

- Mouser