document.write() inside setTimeout() overwrite all page

Question

I call function with document.write() to add inline content (ad banner):

<body>
Page content start<br>
    <script>
    function postContent(){
      document.write('added content');
    }
    postContent();
    </script>
<br>Page content end
</body>

on page I got:

Page content start 
added content
Page content end

I want to add this content with delay, but inside setTimeout() document.write() overwrite all content.

<body>
Page content start<br>
<script>
    function postContent(){
        document.write('added content');
    }
    setTimeout(function () {
        postContent();
    }, 3000);
</script>
<br>Page content end
</body>

on page within 3s I got:

added content

How can I call function with document.write() with delay and do not overwrite all page?

Note: I do not have access to function that insert ad banner.

Using document.write() after an HTML document is fully loaded, will delete all existing HTML. — CaptainHere, Mar 25 '17 at 17:43

score 1 · Answer 1 · answered Mar 25 '17 at 17:40

1

If you run document.write after the document is loaded - it overwrites the entire document anycase. So, you should select a specific element, and add inner html text into it:

document.getElementById("container").innerHTML="added content";

answered Mar 25 '17 at 17:40

Sergey Mell

7,780
1
26
50

score 1 · Answer 2 · answered Mar 25 '17 at 17:41

You could use a span and write the line to it using innerHTML.

write() function works the first time because it loads the same time as the document so the line is added in between.

The second time the document is reloaded deleting all the html.

<body>
Page content start<br>
<span id="pid"></span>
<script>
    function postContent(){
        document.getElementById("pid").innerHTML='added content';
    }
    setTimeout(function () {
        postContent();
    }, 3000);
</script>
<br>Page content end
</body>

document.write() inside setTimeout() overwrite all page

2 Answers2