如何從這個博客插件

我工作的一個博客插件，試圖擺脫任何過時或錯誤的做法是去掉文件撰寫的（根據我讀的堆棧溢出），如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?...）標籤。

我測試過的各種替代方案，排隊我的HTML元素之前的JS，然後用getElementById，其次是無論是innerHTML或appendChild，甚至排隊的元素內的JS，通過createElement手段，但沒有用，真的。任何人都可以將我指向正確的方向嗎？

P.S.我幾乎不能複製和粘貼我在這個問題上的所有嘗試。已經有幾十個了，因爲我在javascript方面或多或少都無能爲力，而且我只是試驗我的前進方向，所以我選擇只發布實際工作的代碼並尋求替代方案不是利用document.write，如果這確實是「不好的做法」。

來源

2017-02-13 m.a.a.

爲什麼'document.write'被廢棄或不好的做法？ – giorgio

@giorgio Stack Overflow上有很多線程表明它是...我只是在閱讀。 –

我在開始時就打算要擺脫document.write。在文檔中之前創建一個div元素您的JS代碼，並使用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>

來源

2017-02-13 13:05:08 Bassam

我即將試用此功能。你能否澄清一下普通的'='和'+ ='之間的區別？我還想知道div是否真的有必要，因爲Blogger似乎爲您添加的每個窗口小部件創建了一個div，例如， 'id ='HTML4'' ,,,我可以繼續前進並獲取* ElementById嗎？ –

好吧！所以，即使沒有div，這也是有效的：'document.getElementById（'widget-id'）。innerHTML = item;'非常感謝！用什麼'var item =「」;'？這似乎是額外的線路正在做魔術... –

我已經在for循環之外聲明瞭變量'var item =「」;'，以避免通過for循環更改其值，'item + ='...' ;'='item = item +'...';'如果你需要顯示多個帖子。 – Bassam

您還可以使用document.createElement而不是document.write。

這裏工作的例子 -

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

來源

2017-02-14 06:19:24

如何從這個博客插件

回答

相關問題