DOM 复制节点案例

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<script type="text/javascript">
function copyDiv(flag){
var divNode=document.getElementById("div1");
var newDiv=divNode.cloneNode(flag);//复制节点

var docBody=document.getElementsByTagName("body");
docBody[0].appendChild(newDiv);//将复制的节点加入body

}

</script>
<style>
.divStyle{
border: 1px dashed #ff69b4;
margin-bottom: 15px;
width: 190px;
height: 120px;
}
</style>
<body>
<input type="button" value="只复制div节点"onclick="copyDiv(false)" />
<input type="button" value="只复制div节点和它的子节点" onclick="copyDiv(true)" /><br />

<div id="div1" class="divStyle">
div中有两个段落
<p>段落的文本1</p>
<p>段落的文本2</p>
</div>
</body>
</html>

，，，，，，，，，，，，，，，，，

copyDiv(flag)函数用于复制节点。。。当参数为false时。复制节点自身。为true时，复制自身及其子节点。

时间： 2024-10-04 16:51:21

DOM 复制节点案例的相关文章

DOM 替换节点案例

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <script type="text/javascript"> function replaceImg(){ var divNode=document.getElementById("div1"); v

0166 DOM 之 节点操作： 删除节点，删除留言案例，复制（克隆）节点，动态生成表格案例，创建元素的三种方式，innerHTML和createElement效率对比

1.1.1 删除节点 node.removeChild(child) // 此处的node指 父节点 node.removeChild() 方法: 从 node节点中删除一个子节点,返回删除的节点. <button>删除</button> <ul> <li>熊大</li> <li>熊二</li> <li>光头强</li> </ul> <script> // 1.获取元素 va

jQuery DOM操作-复制节点、替换节点、包裹节点

clone(): 复制节点,默认无事件,如果传递了一个参数true,则表示在复制节点的同时复制元素中所绑定的事件. 1 <script type="text/javascript"> 2 $(function(){ 3 var $apple = $("ul li:eq(0)").clone(); 4 $("ul").append($apple); 5 }); 6 </script> replaceWith(): 将所有匹配

DOM之节点层次

1.1 Node类型 DOM1级定义了一个Node接口,该接口将由DOM中的所有节点类型实现.这个Node接口在JS中是作为Node类型实现的:除了IE之外,其他浏览器可访问这个类型.JS中的所有节点类型都继承自Node类型.注意:不是所有节点类型都受到了Web浏览器的支持. 每个节点都有一个childNodes属性,其中保存着一个NodeList对象.NodeList是一种类数组对象,并不是Array的实例.它实际是基于DOM结构动态执行查询的结果.除了在IE8-中,可以使用Array.pro

JavaScript的DOM操作(节点操作)

创建节点createElement()var node = document.createElement("div");没什么可说的,创建一个元素节点,但注意,这个节点不会被自动添加到文档(document)里. 2.创建文本节点createTextNode()var value = document.createTextNode("text");创建一个文本节点,常用来往元素节点里添加内容,也不会自动添加到文档里.很多人知道innerHTML,不知道这个方法,这个

dom操作节点之常用方法

DOM:获取节点:{1. document.getElementById (元素id):通过元素id找到节点2. document.getElementsByClassName (元素类名className): 通过class类名找到节点,返回的是一个集合3. document.getElementsByTagName (标签名):通过标签名找到节点,返回一个集合 标签名:如<a>\ <p>\ <div> ....4. document.getElementsByNam

jQuery 删除、复制节点

不废话,直接上代码: 案例源码(待会用于操作的) <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jQuery 删除.复制节点</title> <script type="text/javascript" src="../jquery-3.4.1.min.js"

JavaScript HTML DOM 元素(节点)

JavaScript HTML DOM 元素(节点) 创建新的 HTML 元素 创建新的 HTML 元素 如需向 HTML DOM 添加新元素,您必须首先创建该元素(元素节点),然后向一个已存在的元素追加该元素. 实例 <div id="div1"><p id="p1">This is a paragraph.</p><p id="p2">This is another paragraph.<

DOM 处理 节点

js 父节点: parentNode; 子节点: childNode firstChild; lastChild; function func(o) { //alert(o.parentNode.nextSibling.nextSibling.lengh); my=o.parentNode.parentNode.getElementsByTagName("p"); alert(my[2].firstChild.nodeValue); //注意firstChild } </scri