JavaScript高级程序设计 学习笔记之DOM基础(二)
3、replaceChild方法<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Page</title>
<script type="text/javascript">
function replaceMessage(){
var oNewP=document.createElement("p");//创建新元素
var oNewText=document.createTextNode("Hello Universite");//创建文本
oNewP.appendChild(oNewText);//为节点添加文本
var oOldP=document.body.getElementsByTagName("p")[0];//获取第一个p节点元素
// document.body.replaceChild(oNewP, oOldP);//用新节点元素替换旧节点元素及文本内容
//也可以替换为如下
oOldP.parentNode.replaceChild(oNewP,oOldP);
}
</script>
</head>
<body onload="replaceMessage()">
<p>hello world</p>
</body>
</html>
显示如下:
Hello Universite
4、在一个元素之后追加新元素内容<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Page</title>
<script type="text/javascript">
function appendMessage(){
var oNewP=document.createElement("p");//创建新元素
var oNewText=document.createTextNode("Hello Universite");//创建文本
oNewP.appendChild(oNewText);//为节点添加文本
// document.body.appendChild(oNewP);//添加新元素p的文本内容在旧的内容后面
//以上可以替换为
document.getElementsByTagName("p")[0].appendChild(oNewP);//在p元素之后追加新元素内容
}
</script>
</head>
<body onload="appendMessage()">
<p>hello world</p>
</body>
</html>
显示效果：
hello world
Hello Universite
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Page</title>
<script type="text/javascript">
function replaceMessage(){
var oNewP=document.createElement("p");//创建新元素
var oNewText=document.createTextNode("Hello Universite");//创建文本
oNewP.appendChild(oNewText);//为节点添加文本
var oOldP=document.body.getElementsByTagName("p")[0];//获取第一个p节点元素
// document.body.replaceChild(oNewP, oOldP);//用新节点元素替换旧节点元素及文本内容
//也可以替换为如下
oOldP.parentNode.replaceChild(oNewP,oOldP);
}
</script>
</head>
<body onload="replaceMessage()">
<p>hello world</p>
</body>
</html>
显示如下:
Hello Universite
4、在一个元素之后追加新元素内容<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Page</title>
<script type="text/javascript">
function appendMessage(){
var oNewP=document.createElement("p");//创建新元素
var oNewText=document.createTextNode("Hello Universite");//创建文本
oNewP.appendChild(oNewText);//为节点添加文本
// document.body.appendChild(oNewP);//添加新元素p的文本内容在旧的内容后面
//以上可以替换为
document.getElementsByTagName("p")[0].appendChild(oNewP);//在p元素之后追加新元素内容
}
</script>
</head>
<body onload="appendMessage()">
<p>hello world</p>
</body>
</html>
显示效果：
hello world
Hello Universite