Question

我最近问了一个问题here，收到了很好的回复（我将很快接受最积极的回答，除非出现更好的替代方案）但不幸的是，它似乎是建议的两个选项，既不兼容Ajax（或任何动态添加的内容，包括这样的“内联相关jQuery”）

无论如何，我的问题与良好的'document.write()有关。

当页面仍然呈现时，它的效果很好;当附加的片段包含它时，并非如此。是否有任何替代方案不会破坏现有的页面内容，但仍然会附加内联字符串，就像调用发生的位置一样？

换句话说，document.write()是否有一种方法/替代方法，当称为后期渲染时，不会破坏现有的页面内容？可以这么说阿贾克斯友好的版本？

这就是我要去的地方：

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');
}

然后：

<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

您可以访问每个DOM节点的innerHTML属性。如果直接设置它可能会破坏元素，但如果你向它添加更多HTML，它将保留现有的HTML。

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

大锤有innerHTML的各种细微差别，所以我强烈建议使用jQuery这样的库为你规范化一切。

Answer 2

您可以将id分配给脚本标记，并将其替换为新节点。

<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>

如果你需要从字符串插入html，那么你可以这样做：

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);

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

2 个答案: