如何从此 Blogger 小部件中删除 document.write答案

【问题标题】：How to get rid of document.write from this Blogger widget如何从此 Blogger 小部件中删除 document.write
【发布时间】：2017-02-13 12:35:19
【问题描述】：

我正在开发一个 Blogger 小部件，试图摆脱任何已弃用或不良做法（基于我在 Stack Overflow 上阅读的内容），例如 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?...）通过 Blogger 标签。

我已经测试了各种替代方案，在 js 之前排列我的 html 元素，然后使用 getElementById，然后是 innerHTML 或 appendChild，甚至排列元素内部 js，通过createElement，但无济于事，真的。任何人都可以为我指出正确的方向吗？

P.S.我几乎无法复制和粘贴我在这个问题上的所有尝试。有几十个，因为我对 javascript 或多或少一无所知，我只是在试验我的前进方式，所以我选择只发布实际工作的代码并要求一个替代方案不使用document.write，如果这确实是“不好的做法”。

【问题讨论】：

为什么 document.write 会被弃用或不好的做法？
@giorgio Stack Overflow 上有很多线程表明它是......我只是在阅读。

标签： javascript html blogger

【解决方案1】：

我一开始就向您致意，试图摆脱document.write

在文档中在您的 JS 代码之前创建一个具有唯一 ID 的元素，然后通过其 ID getElementById 选择此元素并使用 innerHTML 将您的内容添加到其中

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

【讨论】：

我现在要试试这个。您能否澄清普通 = 和 += 之间的区别？我还想知道 div 是否真的有必要，因为 Blogger 似乎为您添加的每个小部件创建一个 div，例如id = 'HTML4',,, 我可以继续get 那个 ElementById ?
好的！所以，即使没有 div，这也有效：document.getElementById('widget-id').innerHTML = item; 非常感谢！ var item = ""; 是怎么回事？似乎是额外的线路在发挥作用......
我已经在 for 循环之外声明了变量 var item = ""; 以避免通过 for 循环更改其值，如果您需要显示多个帖子，还可以使用 item += '...'; = item = item + '... ';。

【解决方案2】：

您也可以使用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>

【讨论】：