После изменения parentNode.innerHTML, не может получить доступ к ParentNode

Question

Скажут, я иметь следующую структуру DOM и сценарии

var test = document.getElementById('test'); 
 
test.parentNode.innerHTML += 'hello'; 
 
console.log(test.parentNode); // null 
 
console.log(document.getElementById('test').parentNode); // normal result

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

Как сказан выше сценарий, первые выходы null в то время как вторые выходы фактический узел, кто-нибудь знает, почему первый вывод null, а не обычный узел?

Answer 1

После сброса свойства innerHTML, браузер проанализирует содержимое и создает новых элементов. Переменная test не относится к новому элементу, который также имеет идентификатор test. Исходный элемент test отсоединен от DOM и не имеет родительского элемента. test и document.getElementById('test') относятся к различным объектам DOM Element.

Используйте createTextNode и appendChild методы вместо этого и увидеть разницу:

var test = document.getElementById('test'); 
test.parentNode.appendChild(document.createTextNode('hello')); 
console.log(test.parentNode); 

Answer 2

В то время как добавление HTML с использованием test.parentNode.innerHTML += 'hello'; (который равен test.parentNode.innerHTML = test.parentNode.innerHTML + 'hello';), это на самом деле воссоздать элемент так, test (что ссылка на элемент) больше не доступен в dom.

Вместо создание TextNode с помощью createTextNode метода и добавьте с помощью appendChild метода соблюдающего других элементов.

var test = document.getElementById('test'); 
 
test.parentNode.appendChild(document.createTextNode('hello')); 
 
console.log(test.parentNode); 
 
console.log(document.getElementById('test').parentNode);

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

Answer 3

вал + = Ь фактически такой же, как вал = значение + Ь. При написании этого пути должно быть более очевидно, что вы воссоздаете все элементы внутри родителя.

Если вы хотите добавить без уничтожения существующих элементов, используйте appendChild, а не innerhtml.

Answer 4

следующая строка:

test.parentNode.innerHTML += 'hello'; 

это ярлык для:

test.parentNode.innerHTML = test.parentNode.innerHTML + 'hello'; 

Это означает, что тест удален и заменен той же разметки + строки "hello". Но ваша тестовая ссылка больше не содержится в документе.

Вы можете попробовать

test.parentNode.appendChild(document.createTextNode('hello')); 

Answer 5

Ваш код на английском языке будет говорить:

• Дайте мне ссылку на узел DOM с идентификатором «тест»
• Теперь возьмите этот DOM узел из дерево DOM и замените его новым узлом текстом <div id="test"></div>Hello (не опечатка, он будет вставлять именно эту строку).
• Теперь покажите мне родительский узел узла DOM, который вы извлекли из дерева (aha !, но он больше не находится в DOM!)
• Теперь получите ссылку на узел DOM с идентификатором «test» (it находишь вещь, вставленную в два шаге.
• Показать мне Родитель этого узла (не проблемы)

оригинального DOM узел «тест» до сих пор в памяти, но уже не в документе. вы можно увидеть это, посмотрев на test.innerHTML, вы увидите, что он по-прежнему имеет только оригинальный текст, потому что вы смотрите на узел DOM в памяти.

var test = document.getElementById('test'); 
 
test.parentNode.innerHTML += 'additional text'; 
 
console.log(test.parentNode); // null 
 
console.log(test.innerHTML); 
 
console.log(document.getElementById('test').parentNode); // normal result

<div> 
 
<div id="test">Original text</div> 
 
</div>