Question

我正在尝试学习Web开发，所以我对各种语言和标记的经验还不多。我正在创建一个带有博客的网站，该博客从Tumblr v2 API读取JSON数据。从Tumblr获取JSON数据后，我想将每个帖子中的一些数据添加到我自己网站的博客中，这是我一直试图使用的代码..

<script>
function loadBlogPosts(){
$.getJSON("http://api.tumblr.com/v2/blog/[MY_BLOG]/info?api_key=[MY_KEY]",
    function(blogData){
        $.each(blogData.posts, function(){
             $(#main_content).append( [BUNCH OF NESTED HTML] );
        });
    }
);
}
</script>

在写这篇文章之前，我认为在div中制作每篇博文的“布局”是个好主意。所以我想出了这个：

<div class="post">
    <div class="post_header">
        <div class="post_title"></div>
        <div class="post_author"></div>
        <div class="post_date"></div>
    </div>
    <div class="post_content"></div>
    <div class="post_footer"></div>
</div>

但那就是我被困住的地方。我知道我想做什么，但我没有足够的JavaScript / JQuery / JSON / HTML经验知道如何做到这一点。我想要解析JSON博客数据，并且对于每个帖子，将帖子内容应用到该div结构，同时将其写入/附加到“main_content”div。我尝试将该组div复制粘贴到append函数中被引号括起来，但它变成了一堆乱七八糟的引号和斜线，看起来它看起来并没有正常工作..

那么，对我来说最好的办法是什么？有没有一种很好的方法来应用大块嵌套HTML元素，同时使用我的JSON数据中的内容填充它们？如果没有，我该怎么办？我对HTML，JavaScript和网络编码一般都很陌生，所以我可能会完全错误！

Answer 1

当你想用jquery做任何事情时yoiu可以使用这样的东西：

var post = $('<div class="post"></div>');
var postheader = $('<div class="post_header"></div>');

postheader.append('<div class="post_title"></div>');
postheader.append('<div class="post_author"></div>');

post.append(postheader);
post.append('<div class="post_content"></div>');
post.find('.post_title').text('my title');
post.find('.post_content').text('my content');

$('#main_content').append(post);

而不是.text('my title')您当然可以使用.text(variable)

Answer 2

如果您想要高性能：

在纯JavaScript中，性能最高的方法可能使用createDocumentFragment()

function postEl(json){ // create a function for the POST element
 var post=document.createElement('div');
 post.className='post';
 var postHeader=document.createElement('div');
 postHeader.className='post_header';
 var postTitle=document.createElement('div');
 postTitle.className='post_title';
 postTitle.tectContent=json.title;
 //more code
 postHeader.appendChild(postTitle);
 //more code
 post.appendChild(postHeader);
 return post;
}

function appendPosts(){ // append each post to a fragment. and then to the main
 var frag=document.createDocumentFragment();
 for(/*each post*/){
  frag.appendChild(postEl(/*jsonPost*/));
 }
 document.getElementById('main_content').appendChild(frag);
}

预先制作结构也应该提高性能。

cloneNode

https://developer.mozilla.org/en-US/docs/Web/API/Node.cloneNode

https://developer.mozilla.org/en-US/docs/Web/API/document.createDocumentFragment

克隆节点还可以通过直接设置valuse来提高性能，而无需重新创建每个节点。

function appendPosts(js){
 var node=document.createElemtnt('div'),
 frag=document.createDocumentFragment();
 node.innerHTML='<div class="post_header"><div class="post_title"></div><div class="post_author"></div><div class="post_date"></div></div><div class="post_content"></div><div class="post_footer"></div>';
 for(var a=0,b;b=js.posts[a];++a){
  var newNode=node.cloneNode(true),
  childs=newNode.childNodes,
  header=childs[0].childNodes;
  header[0].textContent=b.title/*title from Postdata*/;
  header[1].textContent=b.author/*author from Postdata*/;
  header[2].textContent=b.date/*date from Postdata*/;
  childs[1].textContent=b.content/*content from Postdata*/;
  childs[2].textContent=b.footer/*footer from Postdata*/;
  frag.appendChild(newNode);
 }
 document.getElementById('main_content').appendChild(frag);
}

function loadBlogPosts(){
 $.getJSON("http://api.tumblr.com/v2/blog/[MY_BLOG]/info?api_key=[MY_KEY]",
 appendPosts
)

此功能现在可以正常工作..但由于我不完全知道json响应，您可能需要更改各种帖子键。

注意：我将片段内容放在一个函数中，这样你就可以知道它是如何工作的。你应该将postEl内容放在appendPosts函数中......（也就是更快）

如果您有任何问题，请询问。

修改

不，它们不是全局的

var a,b,c,d; // not globals == var a;var b;var c;var d; var a,b;c;d; // c d = gobal // , comma affter a var allows you to not write 1000 times var.

<强> EDIT2

//....... frag.appendChild(newNode); } var topNode=document.createElement('div'); topNode.className='post'; topNode.appendChild(frag); document.getElementById('main_content').appendChild(topNode); //.....

Answer 3

你可以这样做：

$.each(blogData.posts, function(i,v){
    var cnt= '<div class="post">' +
             '<div class="post_header">' +
                     '<div class="post_title">'+ blogData.posts[i].title +'</div>' +
                     '<div class="post_author">'+ blogData.posts[i].author +'</div>' +
                     '<div class="post_date">'+ blogData.posts[i].date +'</div>' +
             '</div>' +
             '<div class="post_content">' +
                 blogData.posts[i].body +
             '</div>' +
             '<div class="post_footer">' +
             '</div>' +
         '</div>';
    $('#main_content').append(cnt);
});

请注意，您不需要拆分所有行，我只是这样做以使其更具可读性。（我也不确定所有变量是否正确，（我不认为作者存在），但它只是作为演示）

Answer 4

在单独的页面中编写代码，然后使用以下命令将整个html页面附加到div中

$('#containerDiv').load('page.htm');

此外，这是分割内容的好方法。

如何动态地将大块HTML附加到div？

4 个答案: