document.write（）和Ajax-不起作用，正在寻找替代方法

Question

I recently asked a question here , and received a great response ( which I will shortly be accepting the most active answer of, barring better alternatives arise ) but unfortunately it seems the of the two options suggested, neither will be compatible with Ajax ( or any dynamically added content that includes such "inline-relative jQuery" )

Anyways, my question pertains to good ole' document.write() .

While a page is still rendering, it works great; not so much when an appended snippet contains it. Are there any alternatives that won't destroy the existing page content, yet still append a string inline, as in where the call is occurring?

In other words, is there a way/alternative to document.write() that when called post-render, doesn't destroy existing page content? An Ajax friendly version so to speak?

---

This is where I'm going:

var _inline_relative_index = 0;
function $_inlineRelative(){
    // i hate non-dedicated string concatenation operators
    var inline_relative_id = ('_inline_relative_{index}').replace('{index}', (++_inline_relative_index).toString());
    document.write(('<br id="{id}" />').replace('{id}', inline_relative_id));
    return $(document.getElementById(inline_relative_id)).remove().prev('script');
}

And then:

<div>
    <script type="text/javascript">
        (function($script){
            // the container <div> background is now red.
            $script.parent().css({ 'background-color': '#f00' });
        })($_inlineRelative());
    </script>
</div>

Answer 1

you have access to the innerHTML property of each DOM node. If you set it straight out you might destroy elements, but if you append more HTML to it, it'll preserve the existing HTML.

document.body.innerHTML += '<div id="foo">bar baz</div>';

There are all sorts of nuances to the sledgehammer that is innerHTML , so I highly recommend using a library such as jQuery to normalize everything for you.

Answer 2

You can assign id to the script tag and replace it with the new node.

<p>Foo</p>
<script type="text/javascript" id="placeholder">
    var newElement = document.createElement('div');
    newElement.id='bar';
    var oldElement = document.getElementById('placeholder');
    oldElement.parentNode.replaceChild(newElement, oldElement);
</script>
<p>Baz</p>

And if you need to insert html from string, than you can do it like so:

var div = document.createElement('div');
div.innerHTML = '<div id="bar"></div>';
var placeholder = document.getElementById('placeholder'), 
    container = placeholder.parentNode,
    elems = div.childNodes, 
    el;
while (el = elems[0]) {
    div.removeChild(el);
    container.insertBefore(el, placeholder);
}
container.removeChild(placeholder);