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>

它显示一个单个帖子（h2）的标题和内容（分别包含在p和...max-results=1...标记内），标记为＆＃ 34;介绍＆＃34; （.../-/intro?...）通过Blogger标签。

我测试了各种替代方案，在js之前排列我的html元素，然后使用getElementById，然后使用innerHTML或appendChild，或者甚至排队元素里面 js，通过createElement，但无济于事，真的。是否有可能让任何人指出正确的方向？

P.S。我很难复制并粘贴我在这个问题上的所有尝试。有几十个，因为我在javascript方面或多或少一无所知，而我只是尝试前进的方式，所以我选择只发布实际工作的代码并要求另一个不使用document.write的替代方案，如果那确实是＆＃34;不良做法＆＃34;。

Answer 1

我一开始就试图摆脱document.write问候你。在文档中的之前创建一个div元素，然后使用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

您也可以使用document.createElement代替document.write。

这是工作示例 -

＆＃13;

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

＆＃13;

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

2 个答案: