[Edit]

JavaScript - replace entire HTML node

1 contributors

2 contributions

0 discussions

7 points

Created by:

Lani-Skinner

748

In this short article, we would like to show a simple way how to replace entire <html> node using JavaScript.

Quick solution:

xxxxxxxxxx
 
var writer = document.open('text/html', 'replace');
​
writer.write('<!doctype html><html><body>Hello World!</body></html>');
writer.close();

Practical example

Edit

In this solution old HTML source code is overwritten by new one.

xxxxxxxxxx
 
<!doctype html>
<html>
<body>
  <script>
​
    var writer = document.open('text/html', 'replace');
​
    writer.write('<!doctype html><html><body>Hello World!</body></html>');
    writer.close();
​
  </script>
</body>
</html>

Auto running

Alternative solution

Edit

In this solution old HTML element is replaced by new one.

xxxxxxxxxx
 
<!doctype html>
<html>
<body>
  <script>
​
    var html = document.createElement('html');
    html.innerHTML = '<body>Hello World!</body>';
​
    document.replaceChild(html, document.documentElement);
​
  </script>
</body>
</html>