document.write () и Ajax - не работает, ищет альтернативу - PullRequest
Новая
       3

document.write () и Ajax - не работает, ищет альтернативу

0 голосов
/ 22 сентября 2011

Я недавно задал вопрос здесь и получил отличный ответ (, на который я вскоре приму наиболее активный ответ, за исключением появления лучших альтернатив ), но, к сожалению, кажется, что из двух предложенных вариантов ни один из них не будет совместим с Ajax ( или любым динамически добавляемым контентом, включающим такой «inline-относительный jQuery» )

В любом случае, мой вопрос касается хорошего оле 'document.write().

Пока страница все еще отображается, она прекрасно работает; не так много, когда добавленный фрагмент содержит его. Существуют ли альтернативы, которые не уничтожат существующее содержимое страницы, но все же добавят строку в строку, например, в том месте, где происходит вызов?

Другими словами, есть ли способ / альтернатива document.write(), который при вызове post-render не уничтожает существующее содержимое страницы? Аякс дружественная версия так сказать?

Вот куда я иду: 

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>

Ответы [ 2 ]

4 голосов
/ 22 сентября 2011

у вас есть доступ к свойству innerHTML каждого узла DOM. Если вы установите его прямо, вы можете уничтожить элементы, но если вы добавите к нему больше HTML, он сохранит существующий HTML. 

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

В кувалде есть все виды нюансов innerHTML, поэтому я настоятельно рекомендую использовать такую ​​библиотеку, как jQuery, чтобы все нормализовать для вас.

1 голос
/ 22 сентября 2011

Вы можете присвоить id тегу script и заменить его новым узлом. 

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