Блог

Главная - Вопросы по программированию - я думаю, что код тот же, но я не знаю, почему он дает разные результаты

я думаю, что код тот же, но я не знаю, почему он дает разные результаты

#javascript

#javascript

Вопрос:

Почему код делает разные выходные данные, и это почти тот же ввод? Ввод:

 var Add = document.getElementById('AddElement'); //the button
var Element = document.getElementById('element'); // the input text
var ListParent = document.querySelector('ul');
    
Add.addEventListener('click', function(){
    var AddText = document.createElement('li').appendChild(document.createTextNode("hello"));
    ListParent.appendChild(AddText);
})

Вывод:

первый щелчок: привет

второй щелчок: привет, привет

 Input:
 
 var Add = document.getElementById('AddElement');
var Element = document.getElementById('element');
var ListParent = document.querySelector('ul');
    
Add.addEventListener('click', function(){
    var AddText = document.createElement('li');
    AddText.appendChild(document.createTextNode('hello'));   
    ListParent.appendChild(AddText);
})

Вывод:
первый щелчок:

  • здравствуйте

второй щелчок:

  • здравствуйте
  • здравствуйте

Комментарии:

1. проверьте appendChild , он не возвращает родительский узел.

2. Потому appendChild что возвращает добавленный элемент, а не родительский, т. Е. Ваш первый код AddText — это ваш текстовый узел, а не ваш li

Ответ №1:

appendChild возвращает добавленный узел:

 const div = document.createElement('div');
const parent = document.createElement('div');
const result = parent.appendChild(div);
console.log(result === div);

Поэтому, когда вы делаете

 var AddText=document.createElement('li').appendChild(document.createTextNode("hello"));
                                         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

Введенное значение addText — это созданный текстовый узел. В отличие от этого, с

 var  AddText = document.createElement('li');

это <li> , а не текстовый узел.

Итак, при первом подходе созданный <li> не используется (и, вероятно, это не то, что вы хотите).

Если вы хотите использовать <li> и уменьшить свой код, назначьте .textContent <li> вместо этого.

 Add.addEventListener('click', function(){
    ListParent.appendChild(document.createElement('li'))
      .textContent = element.value;
})
Метки: , , ,