DOM节点深度克隆函数cloneNode()用法实例_javascript技巧

本文实例讲述了DOM节点深度克隆函数cloneNode()用法。分享给大家供大家参考。

具体实现方法如下:

复制代码 代码如下:

<html>
<head>
<script type="text/javascript">
function t(){
 var nodeul = document.getElementsByTagName('ul')[0];//获取需要复制的UL节点
 var newul = nodeul.cloneNode(true);//true表示深度复制,即边下边的li和文本也一起;如果是false,则只复制ul
 
 var node_copy = document.getElementById('copyul');
 node_copy.appendChild(newul);
}
</script>
</head>
<body>
<div id="container">
 <ul>
  <li>春天</li>
  <li>夏天</li>
  <li>秋天</li>
  <li>冬天</li>
 </ul>
</div>
<div id="copyul">
</div>
<hr />
<button onclick="t()" value="">指定位置增加节点</button>
</body>
</html>

希望本文所述对大家的javascript程序设计有所帮助。

时间: 2024-12-08 18:14:33

DOM节点深度克隆函数cloneNode()用法实例_javascript技巧的相关文章

DOM节点深度克隆函数cloneNode()用法实例

 这篇文章主要介绍了DOM节点深度克隆函数cloneNode()用法,实例分析了cloneNode()函数深度复制的操作技巧,具有一定参考借鉴价值,需要的朋友可以参考下     本文实例讲述了DOM节点深度克隆函数cloneNode()用法.分享给大家供大家参考. 具体实现方法如下: 代码如下: <html> <head> <script type="text/javascript"> function t(){ var nodeul = docum

DOM节点的替换或修改函数replaceChild()用法实例_javascript技巧

本文实例讲述了DOM节点的替换或修改函数replaceChild()用法.分享给大家供大家参考.具体分析如下: DOM节点的替换过程: (1)创建新的节点: (2)找到旧的节点: (3)站在父节点的角度,使用replaceChild(新,旧)函数来替换. 复制代码 代码如下: <html> <head> <script type="text/javascript"> function t(){  //思路:1.首先找到要替换的节点:2. 创建一个新的

DOM节点删除函数removeChild()用法实例_javascript技巧

本文实例讲述了DOM节点删除函数removeChild()用法.分享给大家供大家参考.具体分析如下: DOM删除一个节点,必须要站在父节点的高度去删除,代码如下: 复制代码 代码如下: <html> <head> <script type="text/javascript"> function t(){  //思路:1.首先找到要删除的节点:2. 找到它的父节点,在父节点的角度删除子节点  var nodeul = document.getEleme

js在指定位置增加节点函数insertBefore()用法实例_javascript技巧

本文实例讲述了js在指定位置增加节点函数insertBefore()用法.分享给大家供大家参考.具体分析如下: 函数原型如下: insertBefore(参数1,参数2):在指定位置添加节点 具体代码如下: 复制代码 代码如下: <html> <head> <script type="text/javascript"> function t(){  var nodeli = document.createElement('li');//创建一个li节

html的DOM中Event对象onabort事件用法实例_javascript技巧

本文实例讲述了html的DOM中Event对象onabort事件用法.分享给大家供大家参考.具体分析如下: onabort 事件会在图像加载被中断时发生. 当用户在图像完成载入之前放弃图像的装载(如单击了 stop 按钮)时,就会调用该句柄. 语法: 复制代码 代码如下: onabort="SomeJavaScriptCode" SomeJavaScriptCode 必需.规定该事件发生时执行的 JavaScript. 支持该事件的 HTML 标签:<img> 支持该事件的

html的DOM中document对象images集合用法实例_javascript技巧

本文实例讲述了html的DOM中document对象images集合用法.分享给大家供大家参考.具体分析如下: images 集合可返回对文档中所有 Image 对象的引用. 语法: 复制代码 代码如下: document.images[] 为了与 0 级 DOM 兼容,该集合不包括由 <object> 标记定义的图像. 例子: 复制代码 代码如下: <html> <body> <img border="0" src="hackanm

html的DOM中Event对象onblur事件用法实例_javascript技巧

本文实例讲述了html的DOM中Event对象onblur事件用法.分享给大家供大家参考.具体分析如下: onblur 事件会在对象失去焦点时发生. 语法如下: 复制代码 代码如下: onblur="SomeJavaScriptCode" SomeJavaScriptCode 必需.规定该事件发生时执行的 JavaScript. 支持该事件的 HTML 标签: <a>, <acronym>, <address>, <area>, <

html的DOM中document对象anchors集合用法实例_javascript技巧

本文实例讲述了html的DOM中document对象anchors集合用法.分享给大家供大家参考.具体分析如下: anchors 集合可返回对文档中所有 Anchor 对象的引用. 语法: 复制代码 代码如下: document.anchors[] 例子: 复制代码 代码如下: <html>    <body>  <a name="first">First anchor</a><br />  <a name="

JavaScript里四舍五入函数round用法实例_javascript技巧

本文实例讲述了JavaScript里四舍五入函数round用法.分享给大家供大家参考.具体如下: JavaScript的Math对象包含了一个round方法用于对数字进行四舍五入操作,下面的代码详细演示了其用法 <!DOCTYPE html> <html> <body> <p id="demo"> Click the button to round the number 2.5 to its nearest integer. </p