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

Question

我有一个网页，列出了很多元素（具体来说是电影），每个项目的 HTML 结构在某种程度上都是大而复杂的（div、图像、链接、CSS 类等）。

首先我加载 100 个元素，用户可以选择加载下 100 个元素（这是使用无限滚动制作的）：现在，我制作了一个 AJAX 请求，请求另外 100 个元素，它以 HTML 文本（所有这些元素）响应加载），我只是将它附加到文档中。

但是，现在我不想用 HTML 文本响应，而不是我想用 JSON 中的 100 个元素数据响应（我可以做到），然后，我的问题是：哪个是添加的最佳方式使用Javascript将这些元素添加到文档中？

我知道我可以遍历 JSON 数组并构造每个元素，但正如我所说，它是一个很大的 HTML 结构，我真的不想创建 div，然后使用 Javascript 将其附加到另一个 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>

Answer 1

答案是制作一个模板，然后使用cloneNode(). 将所有克隆的节点附加到 adocumentFragment以节省绘制时间，最后将其附加到页面。

一种方法：

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.querySelectorAll
• document.createDocumentFragment
• Element.cloneNode(bool)