div에 큰 HTML 블록을 동적으로 추가하려면 어떻게합니까?

Question

웹 개발을 배우려고하기 때문에 아직 다양한 언어와 마크 업에 대한 경험이별로 없습니다. Tumblr v2 API에서 JSON 데이터를 읽는 블로그가있는 웹 사이트를 만들고 있습니다. 텀블러에서 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의 해당 그룹을 추가 기능에 붙여 넣으려고했습니다. 따옴표로 둘러 쌓여 있지만 따옴표와 슬래시가 실제로 엉망이되어 올바르게 작동하는 것처럼 보이지 않았습니다.

그럼 내가 할 수있는 가장 좋은 방법은 무엇일까요? 중첩 된 HTML 요소를 대량으로 적용하면서 내 JSON 데이터의 콘텐츠로 채우는 좋은 방법이 있습니까? 그렇지 않다면 어떻게해야합니까? 저는 HTML, JavaScript 및 웹 코딩에 대해 아직 완전히 익숙하지 않으므로 완전히 잘못 될 것입니다.

Answer 1

. 노드를 복제

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

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

cloneNode 

은 각 노드를 재현없이 직접 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 응답을 정확하게 알지 못하므로 다양한 포스트 키를 변경해야 할 수 있습니다.

참고 : 나는 조각 작품을 함수에 넣어서 어떻게 작동하는지 알 수 있습니다. postend 컨텐츠를 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 2

는이 같은 것을 할 수있는 : 당신은 모든 라인을 분할 할 필요가 없습니다

$.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 3

jquery yoiu로 모든 것을하고 싶을 때

을 사용할 수있다. 대신 .text('my title')의

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

별도의 페이지에 코드를 작성 물론

Answer 4

의 .text(variable)을 사용할 수 있습니다, 다음 사용하여 사업부로 전체 HTML 페이지를 추가합니다

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

또한 콘텐츠를 조각화하는 좋은 방법입니다. 최고 성능의 방법은 아마도 성능을 향상해야하는 구조를 Precreating 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); 
} 

를 사용하는 자바 스크립트 순수에서

: 당신은 높은 성능을 원하는 경우에