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) ...
removechild 函数可以删除父元素的指定子元素，通过本文给大家介绍javascript的removeChild()函数用法，对js removechild函数相关知识感兴趣的朋友一起学习吧
主要介绍了DOM节点删除函数removeChild()用法,实例分析了removeChild()函数实现结点删除的技巧,需要的朋友可以参考下
本文实例讲述了javascript删除元素节点removeChild()用法。分享给大家供大家参考。具体分析如下： 操作DOM节点的方法：removeChild()，移除子节点，那么可以变通一下来实现移除指定的节点，我们可以先去找到要删除...
removeChild(a)是用来删除文档中的已有元素 参数a:要移出的节点 代码如下: ”guoDiv”> <span>1</span> <span>2</span> <span>3</span> </div> var oDiv = document.getElementById(“guoDiv”); var firsChild = ...
下面小编就为大家带来一篇js removeChild 方法深入理解。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
javascript移出节点removeChild()使用介绍.docx
本文实例总结了JavaScript节点及列表操作的方法。...removeChild() replaceChild() insertBefore() （3）查找 getElementsByTagName() //通过标签名称 getElementsByName() //通过元素的Name属性的值 g
假如：一段普通的代码： 其中gift_list为一个table的id 代码如下:var ...i++) { giftTrs[i].removeChild(giftTrs[i]); } 那么这时候只会删除第一行，因为当删除了一个之后，行的位置会向前移动一位。 giftTrs.le
他支持以下DOM2方法: appendChild, cloneNode, hasAttributes, hasChildNodes, insertBefore, normalize, removeChild, replaceChild. 也支持以下DOM2屬性: attributes, childNodes, firstChild, lastChild, local...
js removeChild 障眼法之可能出现的错误，大家看下代码就知道了。
最近看到司徒正美的一篇文章《移除DOM节点》，文中说到在IE中移除容器类节点，会引起内存泄露。
1. 概述 删除后的节点虽然不在文档树中了，但其实它还在内存中，可以随时再次被添加到别的位置。 当你遍历一个父节点的子节点并进行...var removed = parent.removeChild(self); removed === self; // true 2. exa
下面给大家介绍Javascript removeChild()删除节点的方法，具体详情如下所示： 在Javascript中，只提供了一种删除节点的方法：removeChild()。 removeChild() 方法用来删除父节点的一个子节点。 语法： parent....
用户打开查找界面时，有系统推荐的用户，而当用户按条件查找后，查找的结果动态加载和显示。所以考虑到用js来搞。 这个for循环就是移除已有的表单。然后根据Ajax请求过来的数据，动态生成新的表单对象。...