如何動態地將大塊HTML添加到div？

我在學習網絡開發，所以我對各種語言和標記還沒有太多的經驗。我正在創建一個網站，其中包含一個從Tumblr v2 API讀取JSON數據的博客。從的tumblr獲取JSON數據後，我想了一些從每個職位的數據添加到自己的網站的博客，這裏就是我一直在試圖使用代碼..如何動態地將大塊HTML添加到div？

<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和網絡編碼還很陌生，所以我可能會說這個完全錯誤！

來源

2014-01-29 MrKatSwordfish

你應該看看[客戶端模板（HTTP：//en.wikipedia .ORG /維基/ JavaScript_templating）。 –

我同意@FrédéricHamidi：雖然你可以在jQuery中做到這一點，但你的用例看起來像客戶端模板會更合適，因爲你從服務器（未呈現HTML）帶入原始數據並將其放入某種模板。看一下[Mustache.js]（https://github.com/janl/mustache.js）或[Knockout.js]（http://knockoutjs.com/）以獲得簡單的客戶端模板（無數次其他選項，當然）。 – Avish

有趣的是，我會繼續關注它！感謝Frederic和Avish。 – MrKatSwordfish

如果你想高性能：

在純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); 
}

Precreating結構還應該提高性能。

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); 
//.....

來源

2014-01-29 09:38:27 cocco

感謝您提供非常翔實和詳細的答案，cocco！我已經從中學到了很多新東西！快速問題，爲什麼'frag'，'childs'和'header'沒有'var'關鍵字。這使他們全球化的權利？碎片，克隆和節點導航對我來說都是新的，所以我會更多地閱讀它，並嘗試使它工作！謝謝！：] – MrKatSwordfish

不，它們不是全局變量。逗號允許你不寫var多次。 – cocco

哦，我明白了，對不起，我一定誤解了！再次感謝！ – MrKatSwordfish

你可以做這樣的事情：

$.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); 
});

請注意，您不需要拆了所有的線，我只是做到了以使其更具可讀性。（我也不確定是否所有的變量都是正確的，（我不認爲作者存在），但它只是作爲一個演示）

來源

2014-01-29 09:29:03

這很簡單，似乎很好！感謝您輸入Kristof！ – MrKatSwordfish

當你想用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')可以使用過程

來源

2014-01-29 09:30:22 hildende

的.text(variable)編寫代碼在一個單獨的頁面，然後通過使用整個html頁面追加到一個div：

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

另外，這是對內容進行分段的好方法。

來源

2014-01-29 09:36:41 KunJ

如何動態地將大塊HTML添加到div？

回答

相關問題