如何摆脱此Blogger小部件中的document.write

I'm working on a Blogger widget, trying to rid it of any deprecated or bad practices (based what I read on Stack Overflow), such as document.write

我正在研究Blogger小部件,试图摆脱任何弃用或不良做法(基于我在Stack Overflow上读到的内容),例如document.write

This was working:

这是有效的:

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

It displays the title and content (wrapped up within h2 and p tags, respectively) of one single post ( ...max-results=1... ), labeled "intro" ( .../-/intro?... ) by means of Blogger labels.

它显示一个帖子的标题和内容(分别包含在h2和p标签中)(... max-results = 1 ...),标记为“intro”(... / - / intro?.. 。)通过Blogger标签。

I've tested various alternatives, lining up my html elements prior to the js, then using getElementById, followed by either innerHTML or appendChild, or even lining up the elements inside the js, by means of createElement, but to no avail, really. Would it be possible for anyone to point me to the right direction?

我已经测试了各种替代方案,在js之前排列我的html元素,然后使用getElementById,然后使用innerHTML或appendChild,或者甚至通过createElement排列js中的元素,但实际上无济于事。是否有可能让任何人指出正确的方向?

P.S. I can hardly copy and paste all of my attempts in this question. There have been dozens of them, as I'm more or less clueless when it comes to javascript and I'm just experimenting my way forwards, so I've opted for merely posting the code that is actually working and asking for an alternative that does not utilize document.write, if that's indeed "bad practice".

附:我很难复制并粘贴我在这个问题上的所有尝试。有几十个,因为我在javascript方面或多或少无能为力,我只是在尝试前进的方式,所以我选择只发布实际工作的代码并要求替代方案不使用document.write,如果这确实是“不好的做法”。

2 个解决方案

#1

I greet you at the beginning about trying to rid document.write. Create a div element before your JS code in the document and use getElementById

我在开始时问候你试图摆脱document.write。在文档中的JS代码之前创建一个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>

#2

You can also use document.createElement instead of document.write.

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

Here is working example -

这是工作示例 -

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

#1