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

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

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


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

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