Question

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

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

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

我知道我可以遍历JSON数组并构造每个元素，但正如我所说，它是一个很大的HTML结构，我真的不想创建div然后将它附加到另一个div ，使用Javascript设置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()复制节点。将所有克隆节点附加到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（布尔）

使用Javascript

1 个答案: