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

Question

我正在开发一个 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>

显示一个单曲post的标题和内容（分别包含在h2和p标签中）（...max-results=1... )，通过 Blogger 标签标记为 "intro" ( .../-/intro?... )。

我测试了各种替代方案，在 js 之前排列我的 html 元素，然后使用 getElementById，然后是 innerHTML 或 appendChild，或者甚至通过 createElement 将 js 中 内部的元素 排列起来，但实际上无济于事。谁能给我指出正确的方向？

P.S. 我几乎无法复制粘贴我在这个问题上的所有尝试。已经有几十个了，因为我或多或少对 javascript 一无所知，我只是在试验我的前进方向，所以我只选择了 posting 代码实际上正在工作并要求不使用 document.write 的替代方案，如果那确实是 "bad practice".

Answer 1

我在开头问候你试图摆脱document.write

在文档中的 JS 代码之前创建一个具有唯一 ID 的元素，然后 select 通过其 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>

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

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

How to get rid of document.write from this Blogger widget

html

javascript

blogger