内容替换js脚本失败

Question

下面的代码似乎无法正常运行。 newH2Text应该替换para1。 这不会发生。 我使用了Sublime，然后浏览了浏览器控制台，甚至浏览了SO的代码段。 我几乎可以肯定我有逐字记录的代码。

具有自己的id属性的第一段应替换为在我的JS脚本中创建的newH2Text。 我在这里找不到我的错误。 请帮忙。

PS刷新按钮正常工作。 那里没有问题。

 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); } window.onload=function() { 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);

看到这个小提琴的例子

更新

为了更早地发现这些错误，您可以使用“ 严格模式 ”。 例如：

;(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 var newH2=document.createElement("h2"); var newH2Text=document.createTextNode("Welcome"); newH2.appendChild(newH2Text); var oldP=document.getElementById("para1"); document.getElementById("id1").replaceChild(newH2,oldP); *//// // OR a more simpler way document.getElementById("para1").innerHTML = "<h2>Welcome</h2>"; } window.onload=function() { 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>