Разница между выбранным узлом и его импортированным узлом

В приведенном ниже коде я прокомментировал A и B в каждой строке.
В чем разница между A и B? А что рекомендуется?Разница между выбранным узлом и его импортированным узлом

<!DOCTYPE html> 
<html> 

<head> 
    <meta charset="UTF-8"> 
</head> 

<template id="templatetest"> 
    <div>test</div> 
</template> 

<body></body> 

<script type="text/javascript"> 
    var t = document.querySelector('#templatetest'); 

    var n = document.importNode(t.content, true); 
    document.body.appendChild(n); //A 

    document.body.appendChild(t.content); //B 
</script> 

</html>

И еще один вопрос ..
Приведенный выше код предоставляет два «тест» с. Но когда я переключаю позиции A и B, как приведенный ниже код, только один «тест» получается каким-то образом.
Хотелось бы знать, почему это происходит.

<script type="text/javascript"> 
    var t = document.querySelector('#templatetest'); 

    document.body.appendChild(t.content); //B 

    var n = document.importNode(t.content, true); 
    document.body.appendChild(n); //A 
</script>

источник

2014-09-09 Nigiri

Проверьте документы для обоих методов https: // разработчик. mozilla.org/en-US/docs/Web/API/document.importNode https://developer.mozilla.org/en-US/docs/Web/API/Node.appendChild – Luizgrs

На самом деле, я читал их много раз , и до сих пор не знаю, какой из них лучше. Если я правильно понимаю, узел A является копией шаблона, а узел B - ссылкой шаблона. – Nigiri

Точки является importNode создает копию узла и возвращает его, то вы можете добавить его в новый родитель, используя appendChild. Он предназначен для использования, когда вы получаете узлы из других документов и вставляете их в свой документ (например, когда вы перемещаете узлы между разными XML-файлами), эта функция будет фиксировать такие вещи, как свойство ownerDocument и другие внутренние вещи, которые я верить.

appendChild только для добавления узлов к другим узлам, если узел, который вы добавляете, уже является дочерним элементом любого другого узла, сначала он удалит его и переведет его в новый родитель.

В первом примере:

А - создать копию t.content (п - importNode) и добавить его к телу;
B - вы просто добавить t.content к телу, тем самым удаляя его из его оригинальной родитель

Ваш второй пример

B - Вы перемещает содержимое #templatetest к телу
A - #templatetest теперь пуст, у него больше нет контента, поэтому вам больше нечего копировать и добавлять в свое тело.

источник

2014-09-09 13:43:32 Luizgrs

ugh !! t.content не должно быть пустым! Огромное спасибо. Я должен был внимательно прочитать документ appendChild. – Nigiri

Разница между выбранным узлом и его импортированным узлом

ответ

Смежные вопросы