JS添加节点、移除节点、克隆节点

最新推荐文章于 2024-04-14 17:42:16 发布
最新推荐文章于 2024-04-14 17:42:16 发布
阅读量5.8k 收藏 5
点赞数
分类专栏： web前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/tong_struggller/article/details/81697537
版权 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>创建节点和添加节点</title>
</head>
<script>
    window.onload=function () {
        var demo=document.getElementById("demo");  //获取对象
        var div=document.createElement("div");   //创建div节点
        demo.appendChild(div);  //appendChild   向demo里最后添加节点

        /*----------------------*/
        var test=document.createElement("div");
        var childrens=demo.children;
        demo.insertBefore(test,childrens[0]);   //在childrens前加入节点
        //demo.insertBefore(test,null);   //如果为空，则默认加入在最后
        /*移除节点*/
        demo .removeChild(test);   //移除test节点

        /*克隆节点*/
        var last=childrens[0].cloneNode();
        demo.appendChild(last);
        demo.parentNode.appendChild(demo.cloneNode(true));  //克隆节点   为true时克隆的时全部节点，反之为false则只克隆当前节点不包含子节点
    }
</script>
<body>
<div id="demo">
    <div id="one"></div>
</div>
</body>
</html>

 

tong_struggller
关注
  • 0
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JS简单添加元素新节点的方法示例
10-18
总的来说，这个示例提供了JavaScript操作DOM元素的基本方法，包括创建、添加、插入和克隆节点，这些都是构建动态网页的关键技能。通过理解并实践这些方法，开发者能够更加灵活地控制网页的动态表现。
C#实现TreeView节点拖拽的方法
09-03
然后，创建`moveNode`的一个克隆`NewMoveNode`并插入到目标位置，更新选中的节点为`NewMoveNode`，展开目标节点以显示拖放效果，最后移除原始拖动的节点`moveNode`： ```csharp void treeView1_DragDrop(object ...
JS-Dom节点，父子节点
02-21 116
childNodes:只读 属性 自己欸但列表集合 标准下（ff,chrome等）包含了文本和元素类型的节点，也会包含非法嵌套的子节点 非标准下：只包含元素类型的节点，ie7以下不会包含非法嵌套子节点 childNodes只包含一级子节点，不包含后辈孙级以下的节点 DOM节点的类型有很多种 12...
JS获取子节点、父节点、兄弟节点
Yayou_com的博客
07-31 3108
//创建元素节点 var a=document.createElement(&amp;quot;div&amp;quot;); var b=document.createElement(&amp;quot;div&amp;quot;); var c=document.createElement(&amp;quot;div&amp;quot;); //创建文本节点
K8s: 将一个节点移出集群和相关注意事项
最新发布
Wang的专栏
04-14 936
如果在执行 kubectl cordon 和 kubectl drain 命令后，节点的状态变为 NotReady,SchedulingDisabled。此外，如果你在生产环境中操作，请务必先在测试环境中验证所有步骤，以确保操作的正确性和安全性。但尚未成功将所有Pod驱逐到其他节点或节点本身存在某些问题导致它无法进入Ready状态。请注意，在执行这些操作之前，确保已经备份了所有重要的数据和配置，以防万一出现意外情况。可以通过执行以下命令来检查集群中的节点列表：$3 ) 从集群中移除节点。
js DOM ： DOM节点关系（父子节点、同胞节点）
sleepy_girl的博客
07-28 694
<div> <span>21312</> <button id = 'user'>按钮</button> <p>获取我呀</p> </div> <script> var btn = document.getElementById('btn'); va...
JavaScript的节点操作 —— 增加节点
平凡的平淡的博客
04-28 1万+
目录 JavaScript中的节点操作分为：增、删、改、查（获取），四大类型。 我们直接利用案例来学习： HTML布局代码： JavaScript代码实现： 第一步：获取所有要用到的元素对象（可以利用id、class、name、标签获取）。 第二步：事件操作（单击事件、双击事件、鼠标移入事件、移出事件等等） 第三步：在单击事件中，所要做的操作。 在单击事件里面我们做JavaScript的核心代码 —— 添加节点。 最后出现的效果就是这样的效果： JavaScript中的...
js之节点操作-查找创建添加删除克隆
weixin_68658847的博客
09-20 395
js之节点操作-查找创建添加删除克隆
JS实现添加,替换,删除节点元素的方法
10-22
主要介绍了JS实现添加,替换,删除节点元素的方法,实例分析了javascript针对节点元素的替换、删除及常用的几种添加技巧,需要的朋友可以参考下
jQuery-1.9.1源码分析系列（十一）DOM操作续之克隆节点
01-19
什么情况下使用到克隆节点？ 　我们知道在对DOM操作过程中如果直接使用节点会出现节点随操作而变动的情况。比如对节点使用.after/.before/.append等方法后，节点被添加到新的地方，原来的位置上的节点被移除了。有的...
JavaScript实现动态添加Form表单元素的方法示例
10-19
4. `removeAttribute('id')`：由于我们不希望克隆的元素有相同的id，所以移除新克隆节点的id属性。 5. `innerHTML`：设置克隆节点的`innerHTML`，以确保克隆节点具有与原始元素相同的HTML内容。 6. `appendChild...
js结点的克隆
weixin_46806066的博客
08-12 1935
克隆标签尽量不涉及id值，用类 想得到一个和目标标签一样的 被克隆的对象.cloneNode( true)表示克隆对象样式及里面的内容 克隆的时候想要克隆事件的话就把事件封装在div里面 1、创建节点 1 先创建一个节点 2 确定节点的内容 3 给创建的父级末置追加 标签.appendChild() var new_li = document.createElement('li'); // 创建节点 new_li.innerHTML = '6'; //给节点添加内容 ne..
JavaScript-177：节点操作之克隆节点
臧小川的博客
01-20 381
效果图 结构 <ul> <li>1</li> <li>2</li> <li>3</li> </ul> JS var ul = document.querySelector('ul'); // node.cloneNode(); 括号为空 或者里面是 false 浅拷贝 只复制标签 不复制内容 /
js如何增加html节点,js怎么添加元素新节点？（图文详解）
weixin_39554891的博客
06-10 1975
js怎么添加元素新节点？本篇文章就给大家介绍在js中如何实现添加元素新节点的方法。有一定的参考价值，有需要的朋友可以参考一下，希望对你们有所帮助。js要添加元素新节点，就必须先创建好新的元素节点，然后在把新的元素节点添加到html页面上。下面我们通过一个简单的代码示例来详细了解JavaScript要添加元素新节点的方法。js添加元素新节点#div{width: 200px;height: 150p...
JS原生追加子节点
kai_l的专栏
03-17 1万+
var fragment = document.createDocumentFragment(); li = document.createElement('li'); li.className = "xxx"; fragment.appendChild(li); document.getElementById("xx").appendChild(fragment); 如上，需要先原生创
原生js添加节点appendChild、insertBefore
热门推荐
LLL_liuhui的博客
04-12 2万+
1、createElement() 创建元素节点 var element=document.createElement(‘元素名’);2、crateTextNode() 创建文本节点 var txt=document.crateTextNode(‘文本内容’);3、createAttribute() 创建属性节点 var attr=document.createAttribute(‘属性名’)
js中的插入节点
dyb_060310的博客
04-20 3831
    把新创建的节点插入到文档的节点树最简单的方法就是让它成为该文档某个现有节应的子节点,appendChild(newChild)作为要添加子节点的节点的方法被调用，将一个标识为newChild 的节点添加到它的子节点的末尾。语法如下:&lt;script type="text/javascript"&gt;//页面加载完成后用  window.onload=function(){    //...
javascript添加新节点的方法
StartUp 专栏
02-18 1023
 //创建一个新的元素节点，元素名使用sTagName定义oElementNode = document.createElementNode(sTagName); //创建一个新的节点，节点名使用sTextValue定义oTextNode = document.createTextNode(sTextValue); //为元素赋一个新的属性，属性名使用sNameoA
js DOM节点操作之创建、添加、删除和克隆节点
RayShyy的博客
03-21 4337
1. 创建节点 document.createElement(“tagName”)：tagName为HTML标签名，创建一个标签名为tagName的元素节点。 <body> <ul> <li>熊大</li> <li>熊二</li> <li>光头强</li> </ul> </body> <script>
js添加节点
05-25
要在 JavaScript 中添加节点，您可以使用以下步骤： 1. 创建要添加的节点元素。您可以使用 `document.createElement()` 方法创建一个新的元素节点，如下所示： ```javascript var newNode = document....

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值