0

我最近在这里问了一个问题，并收到了很好的回应（我很快就会接受最积极的回答，除非出现更好的选择）但不幸的是，这两个选项似乎都不兼容 Ajax（或任何动态添加的内容，包括这样的“内联相对 jQuery”）

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

虽然页面仍在渲染，但效果很好；当附加的片段包含它时，就不多说了。是否有任何替代方案不会破坏现有页面内容，但仍会在内联附加字符串，如发生调用的位置？

换句话说，document.write()当调用后渲染时，是否有一种方法/替代方法不会破坏现有的页面内容？可以说是 Ajax 友好版本？

这就是我要去的地方：

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

2 回答 2

4

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

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

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

于 2011-09-22T04:05:01.907 回答
1

您可以将 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);
于 2011-09-22T04:24:13.943 回答