What Are Alternatives to Document.Write

What are alternatives to document.write?

As a recommended alternative to document.write you could use DOM manipulation to directly query and add node elements to the DOM.

JavaScript alternative for document.write()

Use innerHTML

<input type="text" id="A" value="some" />
<input type="text" id="B" value="other value" />
<div id="result"></div>

<script type="text/javascript">

var inputA = document.getElementById("A").value;
var inputB = document.getElementById("B").value;

var firstInput = "First input is: " + inputA + '<br />';
var secondInput = "First input is: " + inputB + '<br />';

document.getElementById("result").innerHTML = firstInput + secondInput;
</script>

DEMO

Alternatives to document.write

This just occurred to me, and I remembered your question: the script code can find the script block it is in, so you can traverse the DOM from there. The current script block will be the last one in the DOM at the moment (the DOM still being parsed when the code runs).

By locating the current script block, you can find its parent element, and add new elements anywhere:

<!doctype html>
<html>
    <head>
        <style>
        .parent .before { color: red; }
        .parent .after { color: blue; }
        </style>
    </head>
    <body>
        <script></script>
        <div class="parent">
            <span>before script block</span>
            <script>
            var s = document.getElementsByTagName('script');
            var here = s[s.length-1];

            var red = document.createElement("p");
            red.className = 'before';
            red.innerHTML = "red text";
            here.parentNode.insertBefore(red, here);

            var blue = document.createElement("p");
            blue.className = 'after';
            blue.innerHTML = "blue text";
            here.parentNode.appendChild(blue);
            </script>
            <span>after script block</span>
        </div>
        <script></script>
    </body>
</html>

http://jsfiddle.net/gFyK9/2/

Note the "blue text" span will be inserted before the "after script block" span. That's because the "after" span does not exist in the DOM at the moment appendChild is called.

However there's a very simple way to make this fail.

What alternatives are there to document.write?

Ended up using an iframe to contain a html page with an embedded script tag.

The benefit of an iframe is that I can show/remove it at will, without having to worry about cleaning up the current page document when removing the script.

ie,

HTML

<body>
  <div id="container">
    <a id="show" href="#">show</a>
    <a id="close" href="#">close</a>

    <div id="placeholder"></div>
  </div>
</body>

JavaScript

function appendFrame(elem) {
  var iframe = document.createElement("iframe");
  iframe.id = "iframe";
  iframe.setAttribute("src", "about:blank");
  iframe.style.width = "200px";
  iframe.style.height = "200px";
  $(elem).append(iframe);
}

function loadIFrame() {
  appendFrame($("#placeholder"));

  var doc = document.getElementById('iframe').contentWindow.document;
  doc.open();
  doc.write("<html><head><title></title></head><body><script src='http://zoom.it/aaa.js'><\/script><\/body><\/html>");
  doc.close();
};

$("#show").click(function() {
  loadIFrame();
});

$("#close").click(function() {
  $("#iframe").remove();
});

JSFiddle solution here: http://jsfiddle.net/7KRcG/2/

What Are Alternatives to Document.Write