节点操作-创建并添加删除节点替换克隆节点

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>DOM增删改查</title>
<style type="text/css">
div{
border:#306 1px solid;
width:200px;
height:30px;
margin:10px;
}
#div_1{
background-color:#00ccff;
}
#div_2{
background-color:#FFccff;
}
#div_3{
background-color:#cc00ff;
}
#div_4{
background-color:#00FF00;
}
</style>
</head>

<body>
<script type="text/javascript">
//创建并添加节点
//需求：在div_1节点中添加一个文本节点
function crtAndAdd(){
/*
*1、创建一个文本节点。
*2、获取div_1节点。
*3、将文本节点添加到div_1节点中。
*/

//1、创建节点。使用Document中的createTextNode方法
var oTextNode = document.createTextNode("这是一个新的文本");

//2、获取div_1节点
var oDivNode = document.getElementById("div_1");

//3、将文本节点添加到div_1节点中。
oDivNode.appendChild(oTextNode);

}

//需求：在div_1中创建并添加一个按钮节点。
function crtAndAdd2(){
//1、创建一个按钮节点
var oButNode = document.createElement("input");
oButNode.type = "button";
oButNode.value="一个新按钮";

//2、获取div_1节点
var oDivNode = document.getElementById("div_1");

//3、将文本节点添加到div_1节点中。
oDivNode.appendChild(oButNode);
}

//通过另一种方式完成添加按钮
function crtAndAdd3(){
/*
*其实是使用了容器型标签中的一个属性。innerHTML
*这个属性可以设置html文本
*/

//1、获取div_1节点
var oDivNode = document.getElementById("div_1");

oDivNode.innerHTML = "<input type='button' value='有个按钮' />";
oDivNode.innerHTML ="<a href='http://www.baidu.com'>有个超链接</a>";
}

//需求将div_2节点删除
function delNode(){
//1、获取div_2节点。
var oDivNode = document.getElementById("div_2");

//2、使用div节点的removeNode方法删除
//oDivNode.removeNode(true); PS:较少用

//一般使用removerChild方法。删除子节点。
//获取div_2的父节点，然后在用父节点的removeChild，将div_2删除。
oDivNode.parentNode.removeChild(oDivNode);
}

//需求：用div_3节点替换div_1节点。
function updateNode(){
/*
*获取节点div_1和div_3
*使用replaceNode进行替换
*/
var oDivNode_1 = document.getElementById("div_1");
var oDivNode_3 = document.getElementById("div_3");

//oDivNode_1.replaceNode(oDivNode_3);
//建议使用replaceChild
oDivNode_1.parentNode.replaceChild(oDivNode_3,oDivNode_1);
}

//需求：希望用div_3替换div_1，并保留div_3节点。
//其实就是对div_3进行克隆
function cloneDemo(){
var oDivNode_1 = document.getElementById("div_1");
var oDivNode_3 = document.getElementById("div_3");
var oCopyDiv_3 = oDivNode_3.cloneNode(true);

//oDivNode_1.replaceNode(oDivNode_3);
//建议使用replaceChild
oDivNode_1.parentNode.replaceChild(oCopyDiv_3,oDivNode_1);

}

</script>

</div>
<div id="div_2">
好好学习，day day up!
</div>
<div id="div_3">
div区域演示文字
</div>
<div id="div_4">
节点的增删该查
</div>

</body>

转载于:https://www.cnblogs.com/aineko/p/3778724.html

节点操作-创建并添加删除节点替换克隆节点相关推荐

DOM基本操作（获取元素、节点的创建和添加、节点的替换和删除）
获取元素 document.getElementById通过id名字获取节点 <div id="box"><ul><li>1</li> ...
089_DOM节点动态创建、添加和删除
1. 创建节点 1.1. 创建元素 document.createElement(tagName); 1.2. 创建文本 document.createTextNode("这是新文本.&qu ...
Java如何使用dom4j获取,添加,删除,查找,设置Element节点呢？
转自: Java如何使用dom4j获取,添加,删除,查找,设置Element节点呢? 下文笔者讲述DOM4J操作Element节点的示例分享,如下所示获取文档的根节点 Element rootElm ...
jQuery节点操作创建节点元素删除节点替换节点复制节点等基本本操作
节点操作 jQuery中节点操作查找节点(前面章节已讲) 创建节点插入节点删除节点替换节点复制节点创建节点元素工厂函数$()用于获取或创建节点 $(selector):通过选择器获取节点 ...
js节点的添加删除插入替换
一.创建元素节点createElement 添加节点 node.appendChild(child) -->node父级 child 子级元素追加到最后面效果图二.插入节点inser ...
javascript节点的操作创建、添加、移除、移动、复制
(1)创建新节点 createDocumentFragment() //创建一个DOM片段 createElement() //创建一个具体的元素 createTextNode() //创建一个文本节 ...
节点操作-创建createElement||appendChild-/追加-/插入insertBefore-/替换replaceChild-/删除remove-克隆元素 cloneNode（增删改查）
01-节点操作-创建元素·createElement||appendChild <body><div class="box"><span>我是前 ...
【web前端】JavaScript DOM元素(节点的创建appendChild()，删除removeChild()，修改replaceChild())
创建新的 HTML 元素 (节点) - appendChild() 实例: <!DOCTYPE html> <html><head><meta charset ...
jquery的DOM节点操作(创建和插入元素节点)
1.创建元素节点 2.插入节点动态创建新元素节点后,需要执行插入或追加操作,否则不会在页面显示出来. 按照元素的层次关系来分,可以分为内部和外部两种方法元素内部插入子节点元素内部插入子节点有两种 ...

节点操作-创建并添加删除节点替换克隆节点

节点操作-创建并添加删除节点替换克隆节点相关推荐

最新文章

热门文章