Текстовые узлы в JavaScript иногда не объединяются

При объединении 3 текстовых узлов в 3 разных абзаца первые два ps не объединяются в одном из текстовых узлов. Он должен объединить имя Роберт между двумя другими текстовыми узлами. Он работает только в последней части цикла. (см. последнюю строку, чтобы узнать, как это должно выглядеть). На консоли не отображается ошибка.

Вы можете сказать мне, почему он не работает? Или, может быть, есть лучший способ объединить текстовые узлы, о которых вы знаете?

Это школьное упражнение; Я должен использовать DOM на JavaScript. Прилагаю скриншоты результата.

document.addEventListener('DOMContentLoaded', function() {

  var sing = document.getElementById('sing');

  sing.addEventListener('click', function() {


    var friend1 = document.createElement('div');
    friend1.className = "friend";
    var friend1h3 = document.createElement('h3');
    var robert = document.createTextNode('Robert');
    friend1h3.appendChild(robert);
    document.body.appendChild(friend1h3);


    for (var i = 99; i > 0; i--) {
      var friend1p = document.createElement('p');
      if (i > 2) {
        var a = document.createTextNode((i) + " lines of code in the file, " + (i) + " lines of code; ");
        friend1p.appendChild(a);
        friend1p.appendChild(robert);
        var b = document.createTextNode(" strikes one out, clears it all out " + (i - 1) + " lines of code in the file");
        friend1p.appendChild(b);

      } else if (i === 2) {
        var c = document.createTextNode("2 lines of code in the file, 2 lines of code; ");
        friend1p.appendChild(c);
        friend1p.appendChild(robert);
        var d = document.createTextNode(" strikes one out, clears it all out 1 line of code in the file");
        friend1p.appendChild(d);

      } else {
        var e = document.createTextNode("1 line of code in the file, 1 line of code; ");
        friend1p.appendChild(e);
        friend1p.appendChild(robert);
        var f = document.createTextNode(" strikes one out, clears it all out, 0 lines of code in the file");
        friend1p.appendChild(f);
      }
      document.body.appendChild(friend1p);
    }
  })
})

<button type = "button" id = "sing">Click</button>

Текстовые узлы в JavaScript иногда не объединяются

Подсказка: appendChild перемещает узел DOM; он не создает копию. Если вы остановите цикл на полпути, где вы увидите «Роберт»?

— 15.05.2018 18:31

javascript dom concatenation appendchild textnode

15.05.2018 18:25

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вы перемещаете узел Роберт вместо добавления клон

appendChild:

If the given child is a reference to an existing node in the document, appendChild() moves it from its current position to the new position (there is no requirement to remove the node from its parent node before appending it to some other node).

document.addEventListener('DOMContentLoaded', function() {

  var sing = document.getElementById('sing');

  sing.addEventListener('click', function() {


    var friend1 = document.createElement('div');
    friend1.className = "friend";
    var friend1h3 = document.createElement('h3');
    var robert = document.createTextNode('Robert');
    friend1h3.appendChild(robert);
    document.body.appendChild(friend1h3);


    for (var i = 10; i > 0; i--) {
      var friend1p = document.createElement('p');
      if (i > 2) {
        var a = document.createTextNode((i) + " lines of code in the file, " + (i) + " lines of code; ");
        friend1p.appendChild(a);
        friend1p.appendChild(robert.cloneNode());
        var b = document.createTextNode(" strikes one out, clears it all out " + (i - 1) + " lines of code in the file");
        friend1p.appendChild(b);

      } else if (i === 2) {
        var c = document.createTextNode("2 lines of code in the file, 2 lines of code; ");
        friend1p.appendChild(c);
        friend1p.appendChild(robert.cloneNode());
        var d = document.createTextNode(" strikes one out, clears it all out 1 line of code in the file");
        friend1p.appendChild(d);

      } else {
        var e = document.createTextNode("1 line of code in the file, 1 line of code; ");
        friend1p.appendChild(e);
        friend1p.appendChild(robert.cloneNode());
        var f = document.createTextNode(" strikes one out, clears it all out, 0 lines of code in the file");
        friend1p.appendChild(f);
      }
      document.body.appendChild(friend1p);
    }
  })
})

<button type = "button" id = "sing">Click</button>

15.05.2018 18:34

Другие вопросы по теме

JS - Математика выходит неправильно

Javascript, после возврата обработчика событий к значениям по умолчанию (DOM)

Почему мне нужно 4 previousSibling, чтобы получить 2 предыдущих элемента?

Фокус теряется в IE, когда элемент установлен как скрытый, а затем отображается в той же функции

Почему window.innerWidth не равно outerWidth, если нет вертикальной полосы прокрутки?

Правило CSS не применяется должным образом

Возникли проблемы с использованием одной переменной с 4 отдельными идентификаторами в jQuery

Javascript - rowIndex для кнопки, не работающей в таблице

Расширение Chrome addEventListener null

Разве я не должен следовать рекомендациям XSS на основе OWASP DOM независимо от того, куда вводится полезная нагрузка?

Текстовые узлы в JavaScript иногда не объединяются

Ответы 1

Другие вопросы по теме

Похожие вопросы