document.write replace page content

Question

Whenever i tried using document.write it replaces the current html page content in example i have this HTML

 <body>
<div>
     <h1>Hello</h1>
</div>

and this jQuery

var notif = document.write("<div class = 'bg' style = 'height:250px; width:400px; z-index:10; background:red;'>Good Morning!</div>");
 $('body').append(notif).delay(5000).fadeOut()

this replace the whole page big Hello will be gone the jQuery will work after a 5 seconds it disappears then displays nothing?

Please read [Why is document.write considered a “bad practice”?](https://stackoverflow.com/q/802854/4642212). — Sebastian Simon, May 06 '17 at 02:18
Like Xufox says it's a bad practice and considered obsolete. You could search how to correctly manipulate the DOM. Also `innerHTML` is considered bad code, do a research. — Gerardo, May 06 '17 at 02:27

score 0 · Answer 1 · answered May 06 '17 at 02:26

document.write is not needed for 'append' (document.write writes the content to the page replacing the existing content fully). Pls see the documentation for jquery append: http://api.jquery.com/append/

You'll have to just write

var notif = "<div class = 'bg' style = 'height:250px; width:400px; z-
index:10; background:red;'>Good Morning!</div>";
$('body').append(notif).delay(5000).fadeOut()

document.write replace page content

1 Answers1