[英]content replace js script fails
下面的代碼似乎無法正常運行。 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>
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
。
至少有兩種不同的方法可以執行您要嘗試的操作:
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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.