Javascript-форум - не понимаю cloneNode

Javascript-форум (https://javascript.ru/forum/)

- Общие вопросы Javascript (https://javascript.ru/forum/misc/)

- - не понимаю cloneNode (https://javascript.ru/forum/misc/3189-ne-ponimayu-clonenode.html)

belbek

26.03.2009 12:17

не понимаю cloneNode

Получаю xml через responseXML и хочу вставить и отобразить полученный кусок в имеющемся дереве.
Для этого делаю(как учат все учебники)
var resp = xhr.responseXML
var old = resp.getElementsByTagName('ul')[0];
var noviy = old.cloneNode(true);

и вставляю в заданный li(вложенный спискок)
document.getElementById('some id').appendChild(noviy)

в результате вставлятся мешанина li не в виде списка а именно li следуют один за другим без переноса строки, и в firebug вствленный кусок структурно отображается правильно но блекло. Как корректно вставлять?
И можно ли вообще просто получить кусок хмл и вставить иге в нужное место без создания элементов, создания всех их атрибутов и последующей, и только потом вставки? Спасибо.

Kolyaj

26.03.2009 12:27

С сервера возвращаете обычный html, потом у нужного элемента

document.getElementById('someId').innerHTML = xhr.responseText;

Gvozd

26.03.2009 12:28

Не уверен, но по моему попытка вставить кусок XML в HTML обречена на неудачу.
попробуйте обернуть HTML внутри XML-а в блок CDATA, а потов вставлять с помощью innerHTML
не уверен, что поможет, но попробовать стоит

Caminante

14.03.2013 11:25

У меня аналогичная проблема. Аяксом получаю с сервера XML, в котором есть как бы HTML-разметка, которую нужно перенести на страницу. Например:

<answer>
Ответ на вопрос смотрите <a href="">тут<a>
</answer>

Делаю cloneNode(true), все вставляется, но ссылки не работают, хотя в исходном коде они есть.

Возможно, есть какое-то решение проблемы?

danik.js

14.03.2013 22:25

Цитата:

Сообщение от Caminante

Возможно, есть какое-то решение проблемы?

Нет конечно. Gvozd, же ясно об этом сказал:

Цитата:

Сообщение от Gvozd

обернуть HTML внутри XML-а в блок CDATA, а потов вставлять с помощью innerHTML

Caminante

15.03.2013 08:25

Такое решение мне не подходит, поскольку xml строится с помощью xslt, а xsl:copy-of невозможно обернуть в cdata. Поэтому и спрашиваю, нет ли какого-то альтернативного варианта.

danik.js

15.03.2013 09:18

Цитата:

Сообщение от Gvozd

Не уверен, но по моему попытка вставить кусок XML в HTML обречена на неудачу.

Так и есть. Оно и понятно.

<!DOCTYPE html>
<body>
    <div></div>
    <script>
        var text = '<root><a href="//google.com">Google</a></root>';
        if (typeof DOMParser !== 'undefined') {
            parser = new DOMParser();
            xmlDoc = parser.parseFromString(text, "application/xml");
        } else {
            xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
            xmlDoc.async = false;
            xmlDoc.loadXML(text); 
        }

        var xmlNode = xmlDoc.documentElement.firstChild,
            htmlNode = document.body.children[0];

        try {
            htmlNode.appendChild(xmlNode.cloneNode(true));
        } catch (e) {
            alert(e.message);
        }
    </script>
</body>

Цитата:

Сообщение от Caminante

Поэтому и спрашиваю, нет ли какого-то альтернативного варианта.

Сериализовать xml-узлы в строку и вставлять через innerHTML;
Или проходить в цикле по ним и создавать и вставлять соответствующие им html-элементы.

Caminante

15.03.2013 23:20

danik.js, спасибо за ответ. Решила-таки попробовать переписать все с использованием JSON вместо XML.

tenshi

16.03.2013 09:15

в ие xml и html - это два непересекающихся мира, так что по любому требуется промежуточная сериализация.

я беру xml накладываю xslt который преобразует xml в html с дополнительными преобразованиями и вставляю в документ

tenshi

16.03.2013 09:29

Цитата:

Сообщение от Caminante (Сообщение 241045)

danik.js, спасибо за ответ. Решила-таки попробовать переписать все с использованием JSON вместо XML.

а вот это зря на самом деле. json имеет больше минусов чем плюсов.

воспользуйся например такой либой для xml: https://github.com/nin-jin/jin/blob/...v%3Dweb.jam.js

при этом у тебя будут удобные селекты по xpath запросам, возможность преобразования в html без говнокода на js ну и в целом более практичный и расширяемый формат данных.

danik.js

16.03.2013 12:28

Цитата:

Сообщение от tenshi

в ие xml и html - это два непересекающихся мира

Так в любом браузере. Я тестовый скрипт привел выше.

Цитата:

Сообщение от tenshi

а вот это зря на самом деле. json имеет больше минусов чем плюсов.

В каком плане? И по сравнению с чем? По сравнению с XML и CDATA секциями, содержащими html?

tenshi

17.03.2013 00:50

> Так в любом браузере. Я тестовый скрипт привел выше.

ты забыл применить importNode когда добавлял узлы из одного документа в другой. в современных браузерах нет особой разницы между дом моделями XML и html. а вот в ие - это 2 различные хоть и похожие модели.

> В каком плане? И по сравнению с чем? По сравнению с XML и CDATA секциями, содержащими html?

зачем html пихать в сидату? html вполне органично вписывается в xml, в отличие от json и ему подобных

danik.js

17.03.2013 08:39

Про importNode не знал. Тем не менее, при импорте узлы не "конвертируются". И узел <a> не становится инстансом HTMLAnchorElement.

<!DOCTYPE html>
<body>
    <div></div>
    <script>
        var text = '<root><a href="//google.com">Google</a></root>';
        if (typeof DOMParser !== 'undefined') {
            parser = new DOMParser();
            xmlDoc = parser.parseFromString(text, "application/xml");
        } else {
            xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
            xmlDoc.async = false;
            xmlDoc.loadXML(text);
        }
 
        var xmlNode = xmlDoc.documentElement.firstChild,
            htmlNode = document.body.children[0];
 
        try {
            htmlNode.appendChild(document.importNode(xmlNode, true));
        } catch (e) {
            alert(e.message);
        }
    </script>
</body>

Цитата:

Сообщение от tenshi

зачем html пихать в сидату?

Если так ведь все html-теги в xml-документе не являются html-узлами. Так зачем тогда парсить в dom эти узлы? Чтобы тут же их сериализовать чтобы затем распарсить как html ? Это же тупо. CDATA позволит избежать лишние шаги. Или я чего-то не знаю?

tenshi

17.03.2013 09:49

> И узел <a> не становится инстансом HTMLAnchorElement.
конечно, в xml неймспейс по умолчанию - пустая строка, а в хтмл - "http://www.w3.org/1999/xhtml")

ну вот пример фильтрации вывода с использованием xslt http://habrahabr.ru/post/171557/
также можно нагенеренному пользователем контенту навешать своих классов и прочих прелестей

danik.js

17.03.2013 11:15

Да чтож такое. Опять затупил ) И с firstChild тупанул ведь.

<!DOCTYPE html>
<body>
    <div></div>
    <script>
        var text = '<root><a xmlns="http://www.w3.org/1999/xhtml" href="//google.com">Google</a></root>';
        if (typeof DOMParser !== 'undefined') {
            parser = new DOMParser();
            xmlDoc = parser.parseFromString(text, "application/xml");
        } else {
            xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
            xmlDoc.async = false;
            xmlDoc.loadXML(text);
        }
  
        var xmlNode = xmlDoc.documentElement.firstChild,
            htmlNode = document.body.children[0];
  
        try {
            htmlNode.appendChild(document.importNode(xmlNode, true));
        } catch (e) {
            alert(e.message);
        }
    </script>
</body>

Caminante

17.03.2013 19:04

Ссылки заработали после добавления пространства имен:)
Но остался еще один неприятный глюк - ссылки "выделяются" переходом на новую строку, в исходном коде вот такое:

<p>"Если вы хотите приобрети продукт,
приходите в любой"
 <a xmlns="http://www.w3.org/1999/xhtml" href="...">офис
</a> 
"или"
 <a xmlns="http://www.w3.org/1999/xhtml" href="">салоны наших
дилеров</a>
"."<br></br><br></br>
Не забудьте, что для совершения покупки ...</p>

Т.е. ссылка переходит на новую строчку и после нее тоже переход на новую строку.

var answer = curTheme.getElementsByTagName('question')[j].childNodes[1].cloneNode(true);

var ans = document.createElement('p');
// 	ans.innerHTML = answer;
ans.appendChild(answer);

el('questions_insert').appendChild(ans);

При этом в ИЕ работает только вариант с innerHTML... Честно говоря, после двух дней всевозможных попыток и изучения тонны информации голова идет кругом, так что любое вправление мозгов всячески приветствуется:)

danik.js

17.03.2013 19:39

Цитата:

Сообщение от Caminante

в исходном коде вот такое

В каком исходном коде? Его же нет ) Ноды напрямую импортируются в DOM.

Цитата:

Сообщение от Caminante

При этом в ИЕ работает только вариант с innerHTML

В ИЕ работает. Не работает только в восьмерке (ну и некро-7 и 6 тоже конечно). Потому что в IE8 нету importNode. Но костыль найти не проблема.

Caminante

17.03.2013 21:59

Я имею в виду в коде того, что было добавлено динамически.

Да, для восьмерки я нашла костыль. Но проблема не в ИЕ, а в непонятных переносах строки:(

danik.js

17.03.2013 22:09

А кавычки вас значит не смущают? Нет никаких переносов. И кавычек нет:-)

Caminante

17.03.2013 22:12

Переносы есть уже визуальные, на странице.

danik.js

18.03.2013 05:06

Цитата:

Сообщение от Caminante

У br тоже должен быть корректный namespace

Caminante

18.03.2013 08:31

Переносы получаются там, где ссылка. Я создаю элемент р, в него добавляю из хмл что-нибудь вроде "текст текст <a> ссылка</а> текст", и ссылка переносится на новую строку. И текст после нее тоже.

danik.js

18.03.2013 08:53

Тоесть вставляются теги ? Или у вас у элемента выставлено white-space: pre-wrap?

Caminante

18.03.2013 10:28

Нет, теги не вставляются (те, что были в примере выше, присутствовали в самом xml). White-space не задан...

danik.js

18.03.2013 11:51

Ну, так в чем же тогда проблема?

Caminante

18.03.2013 11:59

Вот в таком отображении:

Код внутри xml-ноды такой:

<p>Если вы хотите приобрети,
приходите в любой <a href=
"">офис</a> или <a href=
"">салоны наших
дилеров</a>.<br />
<br />
Не забудьте, что для совершения покупки нового номера при себе
необходимо иметь паспорт и второй документ на выбор.</p>

danik.js

18.03.2013 12:22

Нет никаких переносов.

<!DOCTYPE html>
<body>
    <div></div>
    <script>
        var text = '<root><p xmlns="http://www.w3.org/1999/xhtml">Если вы хотите приобрети, приходите в любой <a xmlns="http://www.w3.org/1999/xhtml" href= "">офис</a> или <a xmlns="http://www.w3.org/1999/xhtml" href= "">салоны наших дилеров</a>.<br xmlns="http://www.w3.org/1999/xhtml" /> <br xmlns="http://www.w3.org/1999/xhtml" /> Не забудьте, что для совершения покупки нового номера при себе необходимо иметь паспорт и второй документ на выбор.</p></root>';
        if (typeof DOMParser !== 'undefined') {
            parser = new DOMParser();
            xmlDoc = parser.parseFromString(text, "application/xml");
        } else {
            xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
            xmlDoc.async = false;
            xmlDoc.loadXML(text);
        }
   
        var xmlNode = xmlDoc.documentElement.firstChild,
            htmlNode = document.body.children[0];
   
        try {
            htmlNode.appendChild(document.importNode(xmlNode, true));
        } catch (e) {
            alert(e.message);
        }
    </script>
</body>

Caminante

18.03.2013 12:47

У меня был приступ острого тупизма:( Проблема оказалась в стилях для ссылок внутри блока, в который они вставлялись... Теперь все нормально.

danik.js, спасибо за терпение:)

Часовой пояс GMT +3, время: 20:53.