Почему этот скрипт не добавляет дочерний элемент div?

#javascript

Вопрос:

Когда я нажимаю на элемент p с атрибутом onclick, вызывающим функцию make_child, я ожидаю, что он добавит элемент div при каждом нажатии на него, но, похоже, это всего лишь добавление текстового узла к элементу paragraph, в чем причина этого?

 <script type="text/javascript">
function make_child(text, id, type) {
    var text = document.createTextNode(text);
    var target = document.getElementById(id);
    var add = document.createElement(type);
    var addtext = add.appendChild(text);
    target.appendChild(addtext);
}
</script>

 <p id="changeme" onclick="make_child('I have changed', 'changeme', 'div')">Click me to change</p>

1. Что говорит ваша консоль ошибок? Я почти уверен, что это что-то говорит.

2. Ну, мне была выдана недопустимая синтаксическая ошибка при назначении var text, поэтому я изменил эту переменную на text_a, и теперь у меня нет ошибок, но все равно просто добавляю textnode вместо элемента с текстовым узлом в элементе..

3. ах, извините, я упустил из виду, что text это текстовый узел.

4. где ваш changeme элемент

Ответ №1:

измените последнюю строку на эту

 target.appendChild(add);

теперь вы добавляете к правильному элементу

1. Каким образом в функцию передается переменная add, добавляющая текстовый узел?

2. вы создали его add как div и добавили к нему свой текст, теперь найдите свою цель и добавьте к ней add div. Я понятия не имел, как ваш код работал раньше

3. по-видимому, appendChild() возвращает содержимое того, что было добавлено. я не знал этого раньше.

Ответ №2:

Попробуйте сделать target.appendChild(add) вместо target.appendChild(addtext)

Редактировать (более подробно): Синтаксис для appendChild (из MDN) является:

 var child = element.appendChild(child);

Где child находится добавляемый элемент. В этом случае addtext = add.appendChild(text) установлено значение text , а не add . Простое выполнение target.appendChild(add) должно решить эту проблему.

Это также означает, что переменная addtext бесполезна; вы можете удалить ее, оставив только

 add.appendChild(text)

для этой строки.

1. Каким образом в функцию передается переменная add, добавляющая текстовый узел?

2. Ваш вопрос не совсем ясен. add это ссылка на html-элемент, к которому вы добавляете материал. При вызове add.appendChild(text) сам add изменяется. Это означает, что когда вы передаете его в target.appendChild , вы передаете недавно измененную версию, которая содержит добавленный узел.

3. Но когда созданный textnode добавляется к созданному элементу div?

4.Строка addtext = add.appendChild(text) . На самом деле эта строка выполняет две вещи: она устанавливает addtext в text и добавляет text в add . По сути, побочным эффектом add.appendChild(text) является то, что text добавляется к add независимо от назначения ( addtext = ... ).

5. В принципе, да: в конце концов, вы используете объектную модель документа (DOM).