动态操作dom节点

最新推荐文章于 2022-10-31 17:57:09 发布
最新推荐文章于 2022-10-31 17:57:09 发布
阅读量143 收藏
点赞数
分类专栏： JS 文章标签： javascript 前端 html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/tianranran/article/details/121777941
版权
<!-- 使用js代码创建删除节点 - 创建节点: createElement createTextNode createAttribute - 添加节点 父节点.appendChild(子节点) 父节点.insertBefore(新子节点，原来的子节点) .
摘要由CSDN通过智能技术生成 
 <!-- 
        使用js代码创建删除节点
        
           - 创建节点:
                createElement
                createTextNode
                createAttribute

           - 添加节点
              父节点.appendChild(子节点)
              父节点.insertBefore(新子节点，原来的子节点)

           - 移除节点
              父节点.removeChild(子节点)
              节点.remove()

           - 替换节点
              replaceChild   
           - 复制节点
             cloneNode
     -->
</head>

<body>
    <div>
        <p>原来的节点</p>
        
    </div>

    <script>
        //插入节点
        function testInsertNode() {
   
            var divEle = document.querySelector('div')
            var pEle = document.querySelector('p')

            //创建一个新的span节点
            var spanEle = document.createElement('span') //<span></span>
            var textNode = document.createTextNode('我是新元素span') //我是新元素span
            spanEle.appendChild(textNode) //<span>我是新元素span</span>

            divEle.insertBefore(spanEle,
最低0.47元/天 解锁文章
黄酱！
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
DOM 动态创建节点
知来者犹可追
11-17 2201
1、创建一个节点 createElement(“标签名”): 按照给定的标签名创建一个新的元素节点. 方法只有一个参数：被创建的元素节点的名字, 是一个字符串. 方法的返回值：是一个指向新建节点的引用指针. 返回值是一个元素节点, 所以它的 nodeType 属性值等于 1，新元素节点不会自动添加到文档里, 它只是一个存在于 JavaScript 上下文的对象。 //1.创建一个li元素节点...
DOM之节点操作总结（附实例、图解）
weixin_45135068的博客
08-02 2613
目录 获取元素的两种方式 节点的概述 节点层级 3.1 父级节点 3.2 父子节点 3.3 兄弟节点 创建节点 删除节点 复制节点（克隆节点） 三种创建元素的区别 正文 1. 获取元素的两种方式 （1）利用DOM提供的方法获取元素 document.getElementById() document.getElementsByTagName() document.querSelector等 逻辑性不强、繁琐 （2）利用节点层级关系获取元素 利用父子兄弟节点关系获取元素 逻辑性强，但兼容性差 2.
DOM节点操作
m0_74331185的博客
10-31 328
DOM节点操作
动态操作DOM节点
我爱学习的博客
10-11 237
动态操作DOM节点 节点属性 动态操作DOM节点 （1） 创建节点 创建元素节点 document.createElement(‘标签名’)，返回元素节点对象 创建文本节点 document.createTextNode(‘文本内容’) 返回文本元素节点对象 （2） 加入节点 追加子节点 父节点.appendChild(子节点) 向某个节点前插入节点 父节点.insertBefore(要插入的子节点，插入到哪个节点之前) （3） 删除节点 父节点.removeChild(要移除的节点) 也可以获
JS动态操作Dom
weixin_45562774的博客
09-05 497
动态操作dom var tab = document.getElementById(“tab”) var btn = document.getElementById(“btn”) var f = document.getElementsByTagName(“div”) 动态操作dom的方法: 1.动态创建元素:document.createElement("div") var a = do...
基本DOM节点操作
11-26
1、获取元素节点 getElementById()：获取指定唯一id的元素。 getElementByTagName()：获取指定元素标签名的元素数组。 getElementByName()：获取具有指定属性name的元素数组。 2、子节点 element.childNodes：返回该...
纯JavaScript操作DOM节点
最新发布
05-22
纯JavaScript操作DOM节点，通过动态JS创建元素标签，自定义元素的个数，并显示序号和对应的正则表达式验证和图片类型大小验证，，在前端用户姓名和性别多选框的取值已拿到，最后把后面的if else代码放开就可以了，...
JS实现动态添加DOM节点和事件的方法示例
10-19
主要介绍了JS实现动态添加DOM节点和事件的方法,涉及javascript事件响应及针对页面dom元素节点与属性的动态操作相关实现技巧,需要的朋友可以参考下
jQuery DOM插入节点操作指南
10-24
本章节主要介绍了jQuery在HTML中动态插入节点的各种方法,制作成表格，方便大家对比学习，需要的朋友可以参考下
动态操作dom
01-18
动态操作dom方法文/1、document.createElement() 动态创建一个元素标签 //2、appendChild:把创建的标签添加到容器的末尾 // 容器.appendChild(newEle) //3、insertBefore:把创建的标签增加到容器中某一个标签的前面 // 容器.insertBefore(newEle,oldEle) 容器:oldEle.parentNode //4、replaceChild:用新的标签替换老的标签 // 容器.replaceChild(newEle,oldEle) //5、removeChild:删除某一个标签 // 容器.removeChild(我们要删除的元素) //6、cloneNode:复制一个节点 true->把当前元素和它的子元素都克隆一份 false->只把当前的元素克隆,子元素不管 // curEle.cloneNode(true);档
动态添加DOM元素的方式
前端御书房
09-12 4885
动态添加DOM元素的方式，持续更新中……
js动态创建dom元素示例
ABC__D的专栏
05-09 3075
js中有时候需要动态的创建代码，这也是常规的基础知识，再次我总结一下，以备后用！ 直接上代码： //动态添加一个标签 function add(){ var map = document.getElementById("planetmap"); var x=180;
javascript DOM和DOM操作的四种基本方法
热门推荐
爱看书的昌 的博客
10-21 1万+
在了解了javascript的语言特性后，javascript真正大放光彩的地方来了——这就是javascript DOM.Javascript DOMDOM(Document Object Model),文档对象模型。简单的说就是一套操作文档内容的方法。文档：DOM的D 如果没有document(文档)，DOM就无从谈起。当创建了一个网页并把它加载到web浏览器中，DOM就悄然而生，它将根据你
动态插入DOM元素并执行脚本
Daivon_Up的博客
09-01 3214
在 HTML 中脚本以 <script> 来标记，通过设置其内容或src属性执行内联脚本或外部脚本。 本文讨论动态地插入脚本标签时浏览器对它的解析、下载和执行行为。 动态插入脚本的场景可能包括使用 AJAX 获取脚本并动态执行（多用于性能优化）， 以及运行时决定执行页面模板中的某段脚本（多用于单页异步）。 动态执行脚本还有其他方式，比如eval和new Function，这些不在本文的讨论范围。
动态操作表格(DOM操作)
weixin_45846177的博客
11-16 855
动态操作表格(DOM操作) <table>元素是HTML中最复杂的结构之一。要想创建表格，一般都必须涉及表示表格行、单元格、表头等标签。由于涉及标签多，因而使用核心DOM方法创建和修改表格往往都免不了要编写大量的代码。 首先，我们先来看下表格的HTML代码： <table border="1" width="600px"> <tbody> <tr> <td> cell
动态创建DOM元素的三种方式
阿甘正传
09-16 9864
动态创建DOM元素的三种方式 document.write(); 不常用，因为容易覆盖原来的页面。 innerHTML = (); 用的比较多。绑定属性和内容比较方便。(节点套节点) document.createElement(); 用得也比较多，指定数量的时候一般用它。 1、方式一： document.write(); 这种方式的好处是：比较随意，想创建就创建，可以直接在wr...
动态操作DOM节点js实现
yingyiledi的专栏
05-20 1404
近日再次翻看《javascript面向对象编程指南》这本书，读到浏览器环境一章，渐渐明白了js作为脚本语言，需要依托宿主环境来实现功能，从浏览器角度考虑，就是对浏览器的BOM和DOM的操作。DOM操作又可分为：访问、修改、删除、新建。每种操作都有独特的方法和属性。下面取dom节点的访问、新建和删除的功能实例来讲解（参考文章）。     function add()//动态添加表格的例子
DOM 操作技术之动态样式
荆莿鸟
07-11 355
DOM_操作技术_动态样式 /** 动态加载外部样式表 param url 外部样式地址 */ function loadStyle(url){ var link = document.createElement("link"); link.rel = "stylesheet"; link.type = "text/css";
jQuery教程：查找与操作DOM节点
在Web开发中，查找和操作DOM节点是常见的任务，而jQuery库提供了方便快捷的方式来处理这些操作。本教程重点介绍了两种主要的查找方式： 1. **查找元素节点**：jQuery的选择器系统是其强大功能之一，允许开发者根据...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值