Почему тут ответ 1, по идее правильный ответ 2?

Question

[olya_097]

Answer 1

[Stalker_RED]

Правильный ответ действительно 1.
div.appendChild(p) как-бы говорит браузеру:
Возьми элемент p и помести его в конец div'а.
И потом еще раз- то-же самое:
Возьми элемент p и помести его в конец div'а.

При этом оба раза берется один и тот-же элемент p, и во второй раз он будет помещен туда-же, откуда его взяли. Вот демка, где видно как p перемещается внутрь div, в div добавляется еще один элемент, а затем снова идет команда
div.appendChild(p), и видно как p перемещается в конец.


Никакой второй p не появится, для клонирования отдельные методы есть.

Answer 2

[SagePtr]

Один, потому что когда мы делаем appendChild какого-нибудь уже существующего элемента в дереве DOM, то этот элемент исчезает из предыдущего узла (происходит перемещение, а не копирование).
В итоге первый раз элемент с id="p" (потому как если обратиться к необъявленной переменной в режиме без "use strict" - он сперва проверит наличие нужного поля в объекте window, а если обратиться к неизвестному полю объекта window - он вернёт элемент с таким id, если он есть) будет помещён внутрь элемента с id="div". Второй раз - этот элемент будет снова туда помещён, но из старого места он будет убран - то есть, из элемента div снова переместится в конец его же.
Вот наглядный пример с пятью кнопками: https://codepen.io/anon/pen/eLooRm (при нажатии на кнопку - она перемещается вниз, при этом никакого копирования не происходит, просто перенос)

Answer 3

[Antonio Solo]

потому что appendChild переносит элемент внутрь дочернего в конец списка чайлдов.

поэтому второй appendChild ничего не сделает

Comments

[Stalker_RED]

На самом деле сделает, хоть визуально это и не будет заметно. Он повторно возьмет этот p и поместит в конец div.

https://toster.ru/answer?answer_id=1278395#answers...

[Antonio Solo]

Stalker_RED, надо смотреть в исходник на реализацию списка. искренне подозреваю что случай "переместить в позицию где находишься сейчас" разработчики предусмотрели и лишних действий не выполняют

[Stalker_RED]

Antonio Solo, добавил mutationObserver, в консоли можете убедиться, что происходит три изменения
https://jsfiddle.net/k09od4ga/2/

Answer 4

[Robot_Froh Cahes]

Да, совершенно верно, ошибка, два потока будет, потому что скрипт добавляет к див два p тега, а они являются потомками, раз их два, то соответственно их будет столько же .

Comments

[Никита Егоров]

Там один p, откуда второй взялся?

Answer 5

[Rsa97]

Ни одного, потому что переменные div и p не определены.

Comments

[Никита Егоров]

Нет, почитайте что делает id.

Когда мы пишем id=бла-бла-бла, то браузер создаёт объект с этими элементами. И когда идёт такое обращение:
document.getElementById();
то он просто берет элемент из этого объекта, и ему не надо перебирать все элементы и обращаться к DOM, поэтому этот метод самый быстрый.

[Antonio Solo]

учи js что ли ...

https://codepen.io/anon/pen/oPOVgr

[Никита Егоров]

Antonio Solo, js тут не причем, это все же браузеры создают ссылки на объекты.

[Rsa97]

Antonio Solo, Да уж, век живи, век учись. Такой изврат мне в голову не приходил, когда я начинал заниматься JS до такого даже Microsoft ещё не додумался.

[olya_097]

Rsa97, Всмысле изврат?
К чему это?

[Rsa97]

olya_097, Глобальные переменные JS, которые браузер автоматически создаёт по id элементов HTML. Microsoft в IE8 такую пакость ввёл, а остальные браузеры за ним подтянулись.

[Antonio Solo]

Никита Егоров, в конкретном вопросе я не вижу разницы

[SagePtr]

Rsa97, по-моему, подобная гадость была ещё в IE4. Но вот современные браузеры - да, портировали подобное говноповедение не сразу, а начиная с какого-то времени.