Содержимое заменить скрипт js не удается

Question

Код не работает должным образом. newH2Text должен заменить para1. Этого не происходит. Я использовал Sublime, затем просмотрел консоль браузера и даже на фрагменте кода SO. Я почти уверен, что у меня есть код дословно.

Первый абзац, который имеет свой собственный атрибут id, должен быть заменен newH2Text, который создается в моем сценарии JS. Я не могу найти свою ошибку здесь. Пожалуйста помоги.

PS кнопка обновления работает правильно. Нет проблем.

function replaceHeading(){ 
 
\t \t var newH2=document.createElement("h2"); 
 
\t \t var newH2Text=document.createTextNode("Welcome"); 
 
\t \t newH2.appendChild(newH2Text); 
 
\t \t var myDiv=document.getElementById("id1"); 
 
\t \t var oldP=document.getElementById("para1"); 
 
\t \t myDiv.replaceChild(NewH2,oldP); 
 
\t } 
 
window.onload=function() { 
 
\t document.getElementById("btn").onclick=replaceHeading; 
 
}

<div id="id1"> 
 
<p id="para1">Welcome to my web page.</p> 
 
<p id="para2">Take a look around.</p> 
 
<input type="button" id="btn" value="Replace Element"> 
 
<br> 
 
<input type="button" value="refresh" onclick="location.reload()"> 
 
</div>

Answer 1

NewH2 капитализируются, но должна быть newH2 со строчной.

myDiv.replaceChild(newH2,oldP); 

Смотрите эту fiddle для примера

Update

Чтобы поймать эти ошибки раньше вы можете использовать "строгий режим". Примером этого может быть:

;(function(){ 
    "use strict"; 
    function replaceHeading(){ 
      var newH2=document.createElement("h2"); 
      var newH2Text=document.createTextNode("Welcome"); 
      newH2.appendChild(newH2Text); 
      var myDiv=document.getElementById("id1"); 
      var oldP=document.getElementById("para1"); 
      myDiv.replaceChild(NewH2,oldP); 
    } 
}()); 

Который даст вам ошибку Uncaught ReferenceError: NewH2 is not defined.

Answer 2

Есть по крайней мере два различных способа список дел, что вы пытаетесь:

function replaceHeading(){ 
 
     /***** CORRECTED AND WORKING 
 
\t \t var newH2=document.createElement("h2"); 
 
\t \t var newH2Text=document.createTextNode("Welcome"); 
 
\t \t newH2.appendChild(newH2Text); 
 
\t \t var oldP=document.getElementById("para1"); 
 
\t \t document.getElementById("id1").replaceChild(newH2,oldP); 
 
     *//// 
 
     // OR a more simpler way 
 
     document.getElementById("para1").innerHTML = "<h2>Welcome</h2>"; 
 
\t } 
 
window.onload=function() { 
 
\t document.getElementById("btn").onclick=replaceHeading; 
 
}

<div id="id1"> 
 
<p id="para1">Welcome to my web page.</p> 
 
<p id="para2">Take a look around.</p> 
 
<input type="button" id="btn" value="Replace Element"> 
 
<br> 
 
<input type="button" value="refresh" onclick="location.reload()"> 
 
</div>