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

고성능을 원하는 경우 :

순수한 자바 스크립트에서 가장 성능이 좋은 방법은 아마도 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

노드를 복제하면 각 개별 노드를 다시 만들지 않고 값을 직접 설정하여 성능이 향상됩니다.

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 응답을 정확히 모르기 때문에 다양한 post 키를 변경해야 할 수도 있습니다.

참고 : 나는 그것이 어떻게 작동하는지 알 수 있도록 조각을 함수에 넣었습니다. appendPosts 함수 안에 postEl 콘텐츠를 넣어야합니다 ... (더 빠릅니다)

질문이 있으면 물어보세요.

편집하다

아니 그들은 글로벌이 아닙니다

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