`
cakin24
  • 浏览: 1388005 次
  • 性别: Icon_minigender_1
  • 来自: 西安
社区版块
存档分类
最新评论

DOM复制节点

阅读更多

 

一 介绍
复制节点可以使用cloneNode()方法来实现。
cloneNode()方法用来复制节点。
obj.cloneNode(deep)
deep:该参数是一个Boolean值,表示是否为深度复制。
深度复制是将当前节点的所有子节点全部复制,当值为true时表示深度复制。
当值为false时表示简单复制,简单复制只复制当前节点,不复制其子节点。
 
二 应用
复制节点,本示例在页面中显示了一个下拉列表框和两个按钮,当单击“复制”按钮时只复制了一个新的下拉列表框,并未复制其选项。
当单击“深度复制”按钮时将会复制一个新的下拉列表框并包含其选项。
 
三 代码
<head> 
<title>复制节点</title> 
<script language="javascript"> 
 <!--
 function AddRow(bl)
 {
	 var sel=document.getElementById("sexType");
	 var newSelect=sel.cloneNode(bl); 
	 var b=document.createElement("br");
	 di.appendChild(newSelect); 
	 di.appendChild(b); 
 } 
 --> 
</script> 
</head> 
<body> 
<form> 
 <hr>
 <select name="sexType" id="sexType"> 
 <option value="%">请选择性别</option> 
 <option value="0">男</option> 
 <option value="1">女</option> 
 </select> 
 <hr>
<div id="di"></div> 
<input type="button" value="复制" onClick="AddRow(false)"/>
<input type="button" value="深度复制" onClick="AddRow(true)"/>
</form> 
</body> 
 
四 运行结果

 

 

  • 大小: 2.7 KB
1
0
分享到:
评论

相关推荐

    JQuery复制DOM节点的方法

    首先,clone()方法是jQuery中用于复制节点的核心方法。clone()方法可以创建指定元素的一个深拷贝,即包括该元素本身以及其所有子节点。clone()方法有两种形式,一种是不带参数的clone(),另一种是带有布尔值参数的...

    第06章 DOM节点操作(下)

    4. `importNode()`: 将从其他文档导入的节点复制到当前文档。 八、文档片段(DocumentFragment) 1. `document.createDocumentFragment()`: 创建一个轻量级的“文档片段”,用于在不实际修改DOM的情况下组装节点。 ...

    教你javascript克隆dom结点,浅复制结点,深复制结点

    深复制不仅复制节点本身,还递归地复制所有子节点以及属性值,包括引用类型的属性也会创建新的副本。这样,新创建的节点和原始节点及其所有子节点都是独立的,修改不会互相影响。 二、`cloneNode()`方法 `cloneNode...

    js中使用DOM复制(克隆)指定节点名数据到新的XML文件中的代码.docx

    "JS 中使用 DOM 复制(克隆)指定节点名数据到新的 XML 文件中的代码" 在本文中,我们将讨论如何使用 JavaScript 中的 DOM 来复制(克隆)指定节点名数据到新的 XML 文件中。这个过程涉及到三个重要的类:DOM...

    jQuery移动和复制dom节点实用DOM操作案例

    需要注意的是,移动节点与复制节点内容到另一个元素是不一样的。如果只是想把标签里的内容复制到标签内,而不移动标签本身,那么应该使用html()方法,如:$('div').append($('p').html())。这样做只是将标签的内容...

    JavaScript 动态网页实例 - DOM中的节点操作.rar

    DOM是 Document Object Model的缩写,由W3C进行标准化。文档对象模型(DOM)是一个基础性概念,主要涉及网页页面元素...介绍DOM中的节点操作,主要包括:节点插入与追加、节点复制、节点删除与替换、修改节点内容等知识。

    JAVASCRIPT操作DOM建立增加删除克隆访问节点示例宣贯.pdf

    ` 将只复制节点,不包括里面的内容。 6. 删除节点 使用 `removeChild()` 方法可以删除一个节点。例如,`node.removeChild(_p);` 将删除 `&lt;p&gt;` 节点。 7. 替换节点 使用 `replaceChild()` 方法可以替换一个节点。...

    JS常见DOM节点操作示例【创建 ,插入,删除,复制,查找】

    这使得JavaScript可以方便地创建、插入、删除、复制和查找这些节点。 1. 创建节点: - `createElement(tagName)` 方法用于创建一个新的元素节点,如`document.createElement("div")`将创建一个`&lt;div&gt;`元素。 - `...

    javascript节点操作DOM属性和方法

    在实际应用中,我们还可以使用`cloneNode()`复制节点,`appendChild()`和`insertBefore()`移动或复制节点,`childNodes`和`firstChild`、`lastChild`等属性遍历节点集合。 对于更复杂的DOM操作,如遍历和修改DOM树...

    js中使用DOM复制(克隆)指定节点名数据到新的XML文件中的代码

    在这个特定的问题中,我们关注的是如何使用DOM来复制(克隆)指定的节点名数据,并将其保存到一个新的XML文件中。下面将详细解释涉及的三个主要类:DOMDocument、DOMNodeList和DOMNode。 1. **DOMDocument**: 这是...

    Jquery节点插入、复制和替换方法

    在JQuery中,可以通过`clone()`方法来复制DOM节点。 ##### clone() 这个方法用于创建一个或一组元素的副本,但默认情况下,不会复制事件处理程序。例如: ```javascript var clonedElement = $("#myElement")....

    jquery复制节点

    在实际应用中,复制节点可能用在多种场景。比如,当用户添加新的表单项时,可以复制已有的一项并稍作修改;在构建拖放功能时,可能需要临时复制元素以便于移动;或者在某些动态界面中,为了保持布局一致性,可能会...

    [js高手之路]HTML标签解释成DOM节点的实现方法

    4. DOM节点创建与插入:使用JavaScript的document.createElement方法创建对应的DOM元素,通过innerHTML属性设置元素的内容,通过setAttribute方法设置元素的属性,最后将创建的DOM节点插入到页面的document.body中。...

    JavaScript DOM编程艺术 附录.pdf

    为`false`时,仅复制节点自身而不包括其子节点: ```javascript var clonedPara = para.cloneNode(true); ``` #### 插入节点 DOM提供了多种插入节点的方法,包括`appendChild()`和`insertBefore()`。`appendChild...

    XML DOM教程

    DOM提供了丰富的接口来处理XML文档,包括创建新节点、删除节点、复制节点、移动节点以及更新节点属性等操作。通过熟练掌握DOM,开发者可以构建动态、交互式的Web应用程序,实现对XML数据的强大控制。

    JS实现的DOM插入节点操作示例

    在DOM中,我们可以创建新节点、删除节点、移动节点以及复制节点。插入节点是指将一个新创建或已存在的节点添加到现有节点的子节点列表中。这通常涉及到两个关键方法:`insertBefore()` 和 `appendChild()`。 - `...

    使用HTML5canvas和svg从DOM节点生成可打印的分页pdf

    1. **选择目标DOM节点**:首先,你需要确定要转换为PDF的DOM部分。这可能是一个特定的div、表格或者整个页面。使用JavaScript的DOM遍历和选择方法,如querySelector或querySelectorAll,可以轻松实现这一点。 2. **...

    JavaScript DOM编程艺术 附录

    #### 三、复制节点 **1. `cloneNode()` 方法** `cloneNode()` 方法可以复制指定的节点,返回一个指向新节点的引用。该方法接受一个布尔值参数,用于决定是否复制子节点。如果参数为 `true`,则会复制所有的子节点...

Global site tag (gtag.js) - Google Analytics