Элемент HTML добавляется в цикл Javascript for, а затем удаляется при увеличении счетчика
Я работаю над решением для упражнения «зацикливание треугольника» в конце Eloquent JavaScript ch2. Книга просит записывать вывод на консоль, но я хочу вместо этого распечатать вывод на веб-страницу в div с id = "треугольник".
Этот код печатает нужное количество хешей. Проблема в том, что тег
, который создается внутри цикла for, таинственным образом удаляется, когда цикл увеличивается в конечном выражении. То есть: если я прохожу по коду, hashPrint.appendChild (каретка) отлично выполняется в точке останова, но как только отладчик переходит на i ++, дочерний элемент
удаляется с веб-страницы.
var hash = "";
var hashPrint = document.getElementById("triangle");
var carriage = document.createElement("br");
for (var i = 0; i < 7; i++) {
hash += "#";
var content = document.createTextNode(hash);
hashPrint.appendChild(content);
hashPrint.appendChild(carriage);
}
Если я помещаю объявление каретки var в цикл for, он работает нормально. Я знаю, что передовая практика JS поощряет избегать глобальной области видимости, в последнее время я много занимаюсь программированием на Java, и мне показалось, что наличие createElement («br») в global может быть удобно, если я хочу использовать его в другом цикле. на странице.
Несмотря на то, что у меня уже есть решение этой проблемы, я хотел бы знать, почему последнее выражение в цикле for вызовет удаление дочернего узла. В принципе, почему это не работает? Я безуспешно искал объяснение везде и всюду.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
потому что вы добавляете один и тот же элемент, чтобы он заменял себя каждый раз, когда вы его используете. Вам нужно создавать новый каждый раз, когда вы его используете.
for (var i = 0; i < 7; i++) {
hash += "#";
var content = document.createTextNode(hash);
hashPrint.appendChild(content);
var carriage = document.createElement("br");
hashPrint.appendChild(carriage);
}
Я также не уверен, можно ли добавить несколько textNodes к одному элементу
Да, у меня работал тот же код, и мне было интересно, почему код в моем примере не работает. Я думаю, что понял. Объявляя узел вне цикла, он создается только один раз, а затем перемещается в DOM с помощью appendChild () после каждой итерации цикла. Мне все еще кажется странным, что узел удаляется при инкременте, а затем не заменяется до тех пор, пока метод не будет вызван снова.
Попробуйте клонировать узел, иначе appendChild () съест его:
var hash = "";
var hashPrint = document.getElementById("triangle");
var carriage = document.createElement("br");
for (var i = 0; i < 7; i++) {
hash += "#";
var content = document.createTextNode(hash);
hashPrint.appendChild(content);
hashPrint.appendChild(carriage.cloneNode(true));
}
См .: https://developer.mozilla.org/en-US/docs/Web/API/Node/appendChild
или, Почему нужно использовать cloneNode при добавлении documentFragment?
appendChildудаляет элемент из DOM перед добавлением его в новую позицию.