appendChild가 작동하지 않습니다. New to Javascript

저는 JavaScript를 처음 사용하는데 현재 과제가 있습니다. 하나의 질문은 <p> 태그에 새 textNode를 첨부 할 것을 요청합니다. 하지만 내 appendChild는 일하고 싶지 않습니다. 내 모든 다른 코드는 잘 작동하며 예상 한대로 작동합니다. 분명히 내가 뭔가 잘못하고있다.appendChild가 작동하지 않습니다. New to Javascript

편집 : 나는 오류를 수신하고 내 콘솔에서 : catch되지 않은 형식 오류를 : 메소드를 호출 할 수 없습니다 '에 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 : null의"appendChild '메서드를 호출 할 수 없습니다. " –

var 요소 = document.getElementById ("demo ");'가 실패 할 정도로 단락을 제거하고 있습니다. – j08691

"데모"에 추가하려고하지 않습니다. 데모가 제거 된 후에 새로운 요소 "p"가 생성됩니다. 그리고 나서 새로운 textNode를 "p"에 추가하려고합니다. 그래서 그것을'var element = document.getElementById ("demo");'에서'var element = document.getElementById ("p")'??로 변경해야합니까? –

당신의 논리는 잘못된 것입니다.

당신은 당신은 당신이 여기 삭제 한 노드에 자식 노드를 추가하려고이 라인

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

에서 데모라는 요소를 제거합니다

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

하는 당신은 추가 할 수 없습니다 더 이상 존재하지 않는 요소에 대한 요소. 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

with가 적용되지 않습니다. 심지어 변경과 함께 –

죄송합니다, 내 실수는,보다는 = 사용해야합니다 :. 나는 그것을 보여주기 위해 나의 대답을 업데이트했다. –

감사합니다! 그게 효과가! –

귀하의 with 블록은하지에 스크립트를 일으키는 구문 오류를 포함 전혀 굴러 라. 이에 차단

변경 :

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 문서 제목을 "Tag, you 're it!"로 변경하십시오. (어느 부분에서 성공 했습니까?) 2.2 선택기 ID가 "demo"인 요소를 DOM (모자도 성공적이었습니다.) 2.3 자바 스크립트를 사용하여 새 단락 요소 "p"를 만듭니다. (내가 한 것입니다) 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

데모를 제거한 다음 나중에 참조하려고합니다. p # demo를 파기 한 후에도 jsFiddle이 더 깔끔한 방법으로 시도하는 것처럼 보이도록하십시오.

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"> 다음 당신은 (이미 제거)이 요소에 아이

당신을 추가하려고 제거 이 요소를 제거하거나 parent

삭제이 라인에 para 요소를 추가 할 수 있습니다 : var element=document.getElementById("demo");
는 parent.appendChild(para);

와 element.appendChild(para);을 교체하고 모든 것이 제대로 작동합니다.

출처

2013-03-12 19:54:16 Dragos

그게 효과가있어! 지금 가지고있는 유일한 문제는 with 문에 명시된 스타일이 적용되지 않는다는 것입니다. –

여기에 with()가 올바른 문맥에서 사용되는지 모르겠습니다.
나는 오히려'var para = document.createElement ('p')'뒤에 다음과 같은 것을 쓰려고한다.
'para.style.color = '#fff';
para.style.fontFamily = 'Arial';
para.style.backgroundColor = '# 345' '
등등 – Dragos

내가 할 수 있다면 그렇게 하겠지만, 우리가받은 과제는 구체적으로 말해서() –

appendChild가 작동하지 않습니다. New to Javascript

답변

관련 문제