DOM操作---增加节点、增加节点文字、指定位置增加子节点、节点复制、删除一个子节点例子

最新推荐文章于 2022-03-04 08:54:00 发布
最新推荐文章于 2022-03-04 08:54:00 发布
阅读量1.8k 收藏
点赞数 1
分类专栏： 个人生活
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/bor10/article/details/8567584
版权 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
<head>
<title>DOM操作---增加节点、增加节点文字、指定位置增加子节点、节点复制、删除一个子节点例子</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<script type="text/javascript">
    function t1(){
        var nodezhong = document.createTextNode("中");
        var nodeli = document.createElement("li");
        nodeli.appendChild(nodezhong);
       // var uli = document.getElementsbyTagName('ul')[0];
        var uli = document.getElementsByTagName('ul')[0];
        var xi = uli.children[2];
                     //children[2]
        uli.insertBefore(nodeli,xi);

    
    }
    function t2(){
        var oldul = document.getElementsByTagName('ul')[0];
        var newul = oldul.cloneNode(true);
        var cart = document.getElementById('card');
        card.appendChild(newul);
        
    }
    function t3(){
        var uln = document.getElementsByTagName('ul')[0];
        var zhong = uln.children[2];
        uln.removeChild(zhong);
    
    }
</script>
<style type="text/css">


 </style>
 </head>

 <body>
    <ul>
        <li>东</li>
        <li>西</li>
        <li>中</li>
        <li>南</li>
        <li>北</li>
    </ul>
    <div id="card">


    </div>
    <input type="button" value="插中间" οnclick="t1();" />
    <input type="button" value="复制节点" οnclick="t2();" />
    <input type="button" value="删除节点" οnclick="t3();" />
 </body>
 </html>

fourth
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js操作DOM--添加、删除节点的简单实例
10-21
下面小编就为大家带来一篇js操作DOM--添加、删除节点的简单实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
jQuery节点操作
weixin_67642008的博客
07-12 1464
jQuery插入节点&删除节点&复制节点&替换节点&节点遍历
给ul添加li(其他的创建子节点也大概是这样)
zzj19990913的博客
02-21 929
function addToUl(result) { while(myUl.hasChildNodes()){ //清空上一次留下的ul myUl.removeChild(myUl.firstChild); } for(let i = 0 ; i < result.length ; i++){ let myLi = document...
jsdom之创建子节点
小泥鳅
04-07 1771
创建一个元素节点、文本节点、为元素节点添加子节点（基础版） 创建一个元素节点、文本节点、为元素节点添加子节点（加强版） 效果如图：（并进行类型和数据的两次判空操作！） <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>加强版创建节点</title> <script> //需求：点击subm
DOM 动态创建节点
知来者犹可追
11-17 2201
1、创建一个节点 createElement(“标签名”): 按照给定的标签名创建一个新的元素节点. 方法只有一个参数：被创建的元素节点的名字, 是一个字符串. 方法的返回值：是一个指向新建节点的引用指针. 返回值是一个元素节点, 所以它的 nodeType 属性值等于 1，新元素节点不会自动添加到文档里, 它只是一个存在于 JavaScript 上下文的对象。 //1.创建一个li元素节点...
HTML DOM（节点关系、创建节点、删除节点、替换节点、插入节点）
litengbin的博客
01-17 5770
HTML DOM 节点关系 1.节点关系图 假设html代码如实例中，那么各个元素节点的关系如下: d1 d2 d3 的parentNode是parentDiv parentDiv的firstNode是 d1 parentDiv的lastNode是d3 d2的previousSibling是d1 d2的nextSibling是d3 parentDiv的children是 d
Element-ui el-tree新增和删除节点后如何刷新tree的实例
10-14
2. **刷新父节点状态**：删除节点后，需要更新其父节点的`loaded`属性为`false`，并调用`expand()`方法，以重新加载父节点的子节点数据。 ```javascript let nodeToRemove = this.$refs.tree.getNode(nodeId); // ...
JS实现DOM节点插入操作之子节点与兄弟节点插入操作示例
10-18
主要介绍了JS实现DOM节点插入操作之子节点与兄弟节点插入操作,涉及JavaScript节点的创建、添加简单操作技巧,需要的朋友可以参考下
JS常见DOM节点操作示例【创建 ，插入，删除，复制，查找】
10-18
以下是一些关于DOM节点操作的关键知识点： 1. **创建节点**： - `createElement(tagName)`：这个方法用于创建一个新的HTML元素节点，例如`document.createElement('div')`将创建一个`<div>`元素。 - `...
jQuery-1.9.1源码分析系列（十一）DOM操作续之克隆节点
10-23
主要介绍了jQuery-1.9.1源码分析系列（十一）DOM操作续之克隆节点的相关资料,需要的朋友可以参考下
练习：DOM 创建节点
海边拾贝seebit
07-30 172
&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&gt; &lt;html&gt; &lt;meta http-equiv="content-Type" content="text/html; charset=utf-8&q
DOM对象——创建节点和插入节点
qq_51526974的博客
03-04 6689
创建节点和插入节点 很多时候我们想要在某个位置插入一个新的节点，此时我们首先需要有一个新的节点 创建节点 方法 描述 createElement() 创建一个新的节点，需要传入节点的标签名称，返回创建的元素对象 createTextNode() 创建一个文本节点，可以传入文本内容 innerHTML() 也能达到创建节点的效果，直接添加到指定位置 插入节点 方法 描述 write() 将任意的字符串插入到文档中 appendChild() 向元素中添加新的子节
算法--路径总和
CodersCoder的博客
09-08 598
描述 给定一个二叉树和一个目标和，判断该树中是否存在根节点到叶子节点的路径，这条路径上所有节点值相加等于目标和。 说明: 叶子节点是指没有子节点的节点。 示例 分析 从根节点开始，使用递归，判断左节点或者右节点到叶子节点是否存在sum-root.val即可。 实现 class Solution { public boolean hasPathSum(TreeNode root, int sum) { if (root == null) { return fa
dom动态添加子节点
waiwai4701
05-27 779
function ShowData() { var tabUser = document.getElementById("tabUser"); var div1 = document.createElement("div"); div1.innerHTML = "zhagnsan"; tabUser.appendChild(div1); }
JavaScript DOM——创建节点、添加节点和删除节点
DebbyOctober的博客
08-26 2240
一、创建节点 1. 创建元素节点 语法 : document.createElement ( 节点名称 ) 先引入script文件，然后创建一个div 创建元素节点： 但是在控制台(元素里)并没有显示，节点也没有添加到HTML结构中 因为，仅仅是创建，没有说明是放在什么位置，则需要追加元素 因此，将div添加到body里，结果显示有div，且div在后面，因为是追加的 追加节点： 2. 创建文本节点 语法 : document.createTextNode ( 内容 ) 二、添加节点 1.
HTML应用开发基础篇 - 添加内容元素（子节点/追加元素）
徐小mu的博客
12-17 1255
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .content{ border: 1px solid black; background-...
创建元素节点，文本节点以及在指定位置增加节点
weixin_30480583的博客
01-23 333
no1、创建一个新的元素节点，并把它添加到body中 1 window.onload = t; 2 function t(){ 3 var nodeli = document.createElement('li'); 4 document.body.appendChild(nodeli); 5 nodeli.style.cssText = 'width:30...
动态生成DOM节点并插入指定的位置
weixin_43165525的博客
09-08 2384
这也是BIGO面时的其中之一，动态生成DOM节点并插入指定位置 原生方法1： 创建元素节点：Document.createElement(“div”) 创建属性节点：Document.createAttribute(“div”) 创建文本节点：Document.createTextNode(“div”) 插入节点的方法 插入父节点作为子节点 父节点.appendChild(“新节点”) 在指定的位置插入 父节点.insertBefore(新节点，在谁之前) 删除节点 父节点.removeChild(node
JavaScript操作DOM元素的childNode…
aa_mmnn的博客
03-18 871
对于DOM元素，children是指DOM Object类型的子对象，不包括tag之间隐形存在的TextNode，而childNodes包括tag之间隐形存在的TextNode对象。 具体看一下针对children和childNodes在chrome环境下的测试：                       function test() { var o =
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值