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

Question

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

首先，我加载了 100 个元素，用户可以选择加载下 100 个元素(这是使用无限滚动实现的):现在，我制作了一个 AJAX 请求，请求另外 100 个元素，它以 HTML 文本(带有所有这些都已加载)，我只是将其附加到文档中。

但是，现在我不想用 HTML 文本进行响应，而是想用 JSON 中的 100 个元素数据进行响应(我可以这样做)，那么，我的问题是:哪个最好使用 Javascript 将这些元素添加到文档中的方法？

我知道我可以遍历 JSON 数组并构造每个元素，但正如我所说，它是一个大型 HTML 结构，我真的不想创建 div，然后将其附加到另一个 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";
  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。但是，您可以轻松地克隆一个模板，然后填写值。

使用

• 文档.querySelector
• document.querySelectorAll
• document.createDocumentFragment
• Element.cloneNode(bool)