appendChild не работает. Новое в Javascript

Я новичок в JavaScript, и у меня есть задание. Один вопрос требует, чтобы мы добавили новый textNode к тегу <p>. Но мой appendChild не хочет работать. Весь мой другой код работает отлично и делает то, что он должен. Очевидно, я делаю что-то неправильно.appendChild не работает. Новое в Javascript

EDIT: В моей консоли я получаю сообщение об ошибке: неперехваченный TypeError: Невозможно вызвать метод «AppendChild» нулевого

<head> 
<style type="text/css"> 
#demo { 
font-family: Verdana, Geneva, sans-serif; 
font-size: 14px; 
font-style: italic; 
background-color: #996; 
height: 25px; 
width: 400px; 
padding: 20px; 
} 
</style> 
</head> 

<body> 

<p id = "demo">Existential div asks: &quot;Why I am I here?&quot;</p> 

<script> 

document.title="Tag, you're it!"; 

var parent=document.body; 
var child=document.getElementById("demo"); 
parent.removeChild(child); 

var para=document.createElement("p"); 
var node=document.createTextNode("The quick brown fox jumps over the lazy dog."); 
para.appendChild(node); 

var element=document.getElementById("demo"); 
element.appendChild(para); 


with(para){ 
color: "#FFF"; 
fontFamily : "Arial"; 
backgroundColor: "#345"; 
fontSize: "30px"; 
textAlign: "center"; 
width: "600px"; 
height: "200px"; 
padding: "20px"; 
margin: "0px auto"; 
}; 


</script> 
</body>

источник

2013-03-12 Riette du Toit

Спасибо, сменил. И да, я получаю сообщение об ошибке в консоли. Забыл упомянуть в главном посте. В нем говорится: «Uncaught TypeError: не удается вызвать метод« appendChild »из null» –

Вы удаляете абзац так: var element = document.getElementById («demo»); 'будет терпеть неудачу. – j08691

Я не пытаюсь добавить к «демо». После удаления демонстрации я создаю новый элемент «p». И затем я пытаюсь добавить новый textNode к «p». Поэтому я должен изменить его из 'var element = document.getElementById (" demo ");' to 'var element = document.getElementById (" p ")' ?? –

Ваша логика неверна.

Вы удаляете элемент, называемый демонстрационный в этих строках

var child=document.getElementById("demo"); 
parent.removeChild(child);

затем Вы пытаетесь добавить дочерний узел к узлу вы только что сняли здесь:

var element=document.getElementById("demo"); 
element.appendChild(para);

Вы не можете Append элемент к элементу, который больше не существует. Если вы удалите строку removeChild, тогда все должно работать.

Кроме того, ваш с блок не так, вам необходимо изменить его:

with(para.style){ 
    color = "#FFF"; 
    fontFamily = "Arial"; 
    backgroundColor = "#345"; 
    fontSize = "30px"; 
    textAlign = "center"; 
    width = "600px"; 
    height = "200px"; 
    padding = "20px"; 
    margin = "0px auto"; 
};

После этого, все должно быть хорошо.

источник

2013-03-12 19:43:11

My with не применяется. Даже с изменениями –

Извинения, моя ошибка, вам нужно использовать =, а не:. Я обновил свой ответ, чтобы показать это. –

спасибо! это сработало! –

Вашего with блок содержит синтаксические ошибки, которая вызывает сценарий не бежать вообще.

Change, которые блокируют это:

with(para.style) { 
    color = "#fff"; 
    fontFamily = "Arial"; 
    // and so on 
}

источник

2013-03-12 19:37:57

Во-первых, удалить элемент, а затем, вы пытаетесь добавить что-то после этого. Поскольку он удален, его больше нельзя найти в DOM.

var child=document.getElementById("demo"); 
parent.removeChild(child); 

var element=document.getElementById("demo"); // returns nothing, since it was removed 
element.appendChild(para);

Таким образом, просто не удаляйте этот элемент, если вы этого не хотите. JSFiddle demo.

источник

2013-03-12 19:40:27 MarcoK

Хорошо, я вижу, что я делаю неправильно. Но как я могу это исправить? Ниже приведены вопросы из задания, в котором это происходит: 2.1 Измените заголовок документа на «Тег, вы!» (Который был успешным) 2.2 Удалите элемент с помощью идентификатора селектора «demo», обратившись к DOM (шляпа также была успешной) 2.3 Создайте новый элемент абзаца «p», используя javascript (что я и сделал) 2.4 Создайте и присоедините текстовый блок к элементу в 2.3 со следующим текстом: «Быстрая коричневая лиса перепрыгивает через Лентяй." –

Если вы хотите, чтобы текст отображался (но не внутри элемента DOM), вы можете просто добавить его в 'document.body' ([Обновленный JSFiddle] (http://jsfiddle.net/nSy5H/1/)). – MarcoK

Вы удаляете элемент здесь

var child=document.getElementById("demo"); 
parent.removeChild(child);

, а затем пытается использовать его здесь:

var element=document.getElementById("demo"); 
element.appendChild(para);

источник

2013-03-12 19:40:27

Вы удаляете демоверсию, а затем пытаетесь ссылаться на нее позже. См. Этот jsFiddle для более чистого способа делать то, что вы пытаетесь, даже после уничтожения демонстрации p #.

http://jsfiddle.net/FzBrS/

document.title="Tag, you're it!"; 

var demo = document.getElementById("demo"); 
demo.parentNode.removeChild(demo); 
var p = document.createElement("p"); 

document.body.appendChild(p); 

var tn = document.createTextNode("The quick brown fox jumps over the lazy dog."); 
p.appendChild(tn);

источник

2013-03-12 19:44:46

Вы удаление <p id="demo"> (который проводится по переменному ребенку) , а затем вы пытаетесь добавить ребенок к этому элементу (который уже удален)

You может либо не удалить этот элемент, или добавить элемент к paraparent

удалите эту строку : var element=document.getElementById("demo");
заменить element.appendChild(para); с parent.appendChild(para);

и все будет работать правильно.

источник

2013-03-12 19:54:16 Dragos

Это работает! Единственная проблема, с которой я сейчас сталкиваюсь, заключается в том, что стиль, указанный в инструкции with, не применяется. –

Я не уверен, что с() используется здесь в правильном контексте.
Я предпочел бы использовать add после 'var para = document.createElement ('p')' что-то вроде
'para.style.color = '#fff';
para.style.fontFamily = 'Arial';
para.style.backgroundColor = '# 345''
и т. Д. – Dragos

Если бы я мог это сделать, но наше задание, которое мы получили, конкретно говорит о том, что мы должны использовать с() –

ответ

Смежные вопросы