내가 어떤되지 않거나 잘못된 관행을 없애려고 노력하는 블로거 위젯에서 일하고 있어요

Question

이 블로거 위젯에서 document.write를 제거하는 방법 등 document.write

로, (내가 스택 오버플로에 읽은 것을 기반)

이 작동되었습니다

<script type="text/javascript"> 
    function introductory(json) { 
     document.write('<div id="intro-wrapper">'); 
     var i; 
     for (i = 0; i < json.feed.entry.length; i++) { 
      var introTitle = json.feed.entry[i].title.$t; 
      var introContent = json.feed.entry[i].content.$t; 
      var item = '<h2>' + introTitle + '</h2><p>' + introContent + '</p>'; 
      document.write(item); 
     } 
    document.write('</div>'); 
    } 
</script> 
<script src="https://MYBLOG.blogspot.com/feeds/posts/default/-/intro?max-results=1&alt=json-in-script&callback=introductory"></script> 

그것은 블로거에 의한 표시 한 단일 포스트 (...max-results=1...)의 (각각 h2 및 p 태그 내에 포장) 제목과 내용을 "소개"(.../-/intro?...) 표시 레이블.

내가 createElement에 의한 요소 내부 JS, 최대 안감도 하나 innerHTML 또는 appendChild, 또는 다음에, 다음, JS 이전에 내 HTML 요소를 안감 getElementById을 사용하여, 다양한 대안을 테스트했지만 정말 아무 소용이 없습니다. 누구든지 나를 올바른 방향으로 안내 할 수 있습니까?

P.이 질문에 대한 모든 시도를 복사하여 붙여 넣기는 거의 할 수 없습니다. 수십 가지가있었습니다. 자바 스크립트에 관해서는 우둔함이 더 많았 기 때문에 저는 앞으로 나아가는 길을 실험하고 있습니다. 따라서 실제로 작동하는 코드를 게시하고 대안을 요구하는 것으로 선택했습니다. 은이 아니며 실제로는 "나쁜 습관"인 경우 document.write을 사용합니다.

Answer 1

처음에는 당신에게 document.write을 없애려는 것에 대해 인사드립니다. 문서에 전에 JS 코드를 div 요소 를 만들고 또한 document.createElement 대신 document.write을 사용할 수 있습니다 getElementById

<div id="intro-wrapper"></div> 

<script type="text/javascript"> 
    function introductory(json) { 
     var item=""; 
     for (var i = 0; i < json.feed.entry.length; i++) { 
      var introTitle = json.feed.entry[i].title.$t; 
      var introContent = json.feed.entry[i].content.$t; 
      item += '<h2>' + introTitle + '</h2><p>' + introContent + '</p>'; 
     } 
    document.getElementById('intro-wrapper').innerHTML=item; 
    } 
</script> 
<script src="https://MYBLOG.blogspot.com/feeds/posts/default/-/intro?max-results=1&alt=json-in-script&callback=introductory"></script> 

Answer 2

사용합니다.

<script> 
 
    function introductory(json) { 
 
     var RecentPostContainer = document.createElement('div'); 
 
     RecentPostContainer.className = 'RecentPostContainer'; 
 

 
     for(i = 0; i < json.feed.entry.length; i++) { 
 

 
      var PostContainer = document.createElement('div'); 
 
      PostContainer.className = 'PostContainer'; 
 

 
      var PostTitle = document.createElement('h2'); 
 
      PostTitle.className = 'PostTitle'; 
 
      var PostTitleText = document.createTextNode(json.feed.entry[i].title.$t); 
 
      PostTitle.appendChild(PostTitleText); 
 
      PostContainer.appendChild(PostTitle); 
 

 
      var PostContent = document.createElement('div'); 
 
      PostContent.className = 'PostContent'; 
 
      PostContent.innerHTML = json.feed.entry[i].content.$t; 
 
      PostContainer.appendChild(PostContent); 
 

 
      RecentPostContainer.appendChild(PostContainer); 
 

 
     } 
 

 
     document.getElementById('RecentPostContainer').insertAdjacentHTML('afterend', RecentPostContainer.outerHTML); 
 
    } 
 
</script> 
 
<script id='RecentPostContainer' src="https://blogger.googleblog.com/feeds/posts/default/?max-results=1&alt=json-in-script&callback=introductory"></script>