removeChild,replaceChild,insertBefore,innerText,innerHTML,outerText,outerHTML学习
今天学习一下javascript，对节点操作进行代码练习，我以前看过，就是很简单的看看，没有认真的学习，今天是认真的学习了一下。
removeChild移除节点内容
replaceChild替代节点内容
insertBefore在某个节点前插入一个节点
innerText,innerHTML,outerText,outerHTML这些以前就比较熟悉了！
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<script type="text/javascript">
function deleteHelloWorld(){
var helloworld=(document.body.getElementsByTagName("p"))[0];
document.body.removeChild(helloworld);
}
function deleteFirstLine(){
var firstLine=document.getElementById("myHeader");
document.body.removeChild(firstLine);
}
function replaceMessage(){
var newFirstLine=document.createElement("p");
var newFirstLineText=document.createTextNode("New First Line!");
newFirstLine.appendChild(newFirstLineText);
var oldNode=document.getElementById("myHeader");
oldNode.parentNode.replaceChild(newFirstLine,oldNode);
}
function insertBeforeMessage(){
var insertBefore=document.createElement("p");
var insertBeforeText=document.createTextNode("a text");
insertBefore.appendChild(insertBeforeText);
var oldNode=document.getElementById("myHeader");
oldNode.parentNode.insertBefore(insertBefore,oldNode);
}
function intertextStuff(){
var innerLine1=document.getElementById("innerLine1");
innerLine1.innerText="new text of innerLine1";
var innerLine2=document.getElementById("innerLine2");
innerLine2.innerHTML="<strong>New text of innerLine2</strong>";
//wrong: innerLine2.innerHTML="<h1>New text of innerLine2</h1>";
}
function outertextStuff(){
var outerLine1=document.getElementById("outerLine1");
outerLine1.outerText="new text of outerLine1";
var outerLine2=document.getElementById("outerLine2");
outerLine2.outerHTML="<h1>New text of outerLine2</h1>";
}
</script>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<BODY>
<h1 id="myHeader">First Line</h1>
<a href="javascript:deleteHelloWorld()"><big>delete "Hello World"</big></a>
<br>
<a href="javascript:deleteFirstLine()"><big>delete "First Line"</big></a>
<br>
<a href="javascript:replaceMessage()"><big>Replace "First Line" with "New First line"</big></a>
<br>
<a href="javascript:insertBeforeMessage()"><big>Insert "a text" before "First line"</big></a>
<script type="text/javascript">
var helloWorld=document.createElement("p");
var helloWorldText=document.createTextNode("Hello World");
helloWorld.appendChild(helloWorldText);
document.body.appendChild(helloWorld);
//var docBody=(document.getElementsByTagName("body"))[0]
//docBody.appendChild(helloWorld);
//insert a few nodes at a time
var oFragment=document.createDocumentFragment(); //创建文档片段对象
for(var i=0;i<10;i++){
var oP=document.createElement("p");
var oText=document.createTextNode(i);
oP.appendChild(oText);
oFragment.appendChild(oP);
}
document.body.appendChild(oFragment);
//how many properties are available?
var props=new Array();
for(var property in window.document){
props.push(property);
}
for(i=0;i<props.length;i++){
document.write(props[i]+"/");
if(i>0 && i%6==0){
document.write("<br>");
}
}
</script>
<br>
<p id="innerLine1">InnerLine1</p>
<p id="innerLine2">InnerLine2</p>
<h4 id="outerLine1">outerLine1</h4>
<h4 id="outerLine2">outerLine2</h4>
<a href="javascript:intertextStuff()"><big>InnerLine</big></a>
<a href="javascript:outertextStuff()"><big>OuterLine</big></a>
</BODY>
</HTML>
分享到：
相关推荐
//3、insertBefore:把创建的标签增加到容器中某一个标签的前面 // 容器.insertBefore(newEle,oldEle) 容器:oldEle.parentNode //4、replaceChild:用新的标签替换老的标签 // 容器.replaceChild(newEle,oldEle) ...
本文实例总结了JavaScript节点及列表操作的方法。...removeChild() replaceChild() insertBefore() （3）查找 getElementsByTagName() //通过标签名称 getElementsByName() //通过元素的Name属性的值 g
他支持以下DOM2方法: appendChild, cloneNode, hasAttributes, hasChildNodes, insertBefore, normalize, removeChild, replaceChild. 也支持以下DOM2屬性: attributes, childNodes, firstChild, lastChild, local...
使用 `insertBefore()` 方法可以将节点插入到目标节点的前面。例如，`node.insertBefore(_span, _p);` 将 `<span>` 节点插入到 `<p>` 节点的前面。 5. 复制节点 使用 `cloneNode()` 方法可以复制一个节点。例如，`...
可以使用RemoveAll()或RemoveChild()方法删除XML文档中的节点，RemoveAll()方法可以删除所有子节点，而RemoveChild()方法可以删除指定的子节点。 更新节点 可以使用ReplaceChild()方法将新节点替换老节点，也可以...
Dom createElement()、createTextNode()、appendChild()、removeChild()、replaceChild()、insertBefore()、createDocumentFragment() //创建新节点 function CreatNode() { var oP = document.createElement(“p”)...
createElement，createTextNode，appendChild，insertBefore，removeChild，replaceChild createElement 以下代码是用于创建 <p> 元素: var para = document.createElement("p"); createTextNode 为 <p> 元素添加...
实例演示对javascript的节点的各种操作。包括hasChildNodes()，removeChild()，appendChild()，replaceChild()，insertBefore()，cloneNode()等
* insertBefore()：在指定的参照节点之前插入一个节点 * replaceChild()：将一个节点替换为另一个节点 * removeChild()：移除一个节点 * cloneNode()：克隆一个节点，可以选择是否克隆节点的所有子节点 Document ...
JavaScript权威指南 犀牛书 Chapter 1. Introduction to JavaScript Section 1.1. JavaScript Myths Section 1.2.... Section 1.3.... Section 1.4.... Section 1.5.... Section 1.6.... Section 1.7.... Section 1.8....