私は非推奨または悪い習慣のそれを取り除くしようとすると、Bloggerのウィジェットに取り組んでいます

Question

このBloggerのウィジェットからの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> 

それはブロガーによる「イントロ」（.../-/intro?...）ラベル、単一のポストのタイトルと内容を（それぞれ、h2とpタグ内に包ま）（...max-results=1...）が表示されますラベル。

私は、createElementによる要素内部 JSを、並んでもどちらかinnerHTMLまたはappendChild、または続く、その後、jsの前に私のHTML要素を並べるgetElementByIdを使用して、さまざまな選択肢をテストしてみたが、本当に役に立たない。誰でも私を正しい方向に向けることが可能でしょうか？

P.S.私はこの質問のすべての試みをコピーして貼り付けることはほとんどできません。私は多かれ少なかれ、javascriptについて言えば、私は多かれ少なかれ無限であり、実際に働いているコードを投稿し、代わりにでない場合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>