DOM操作-2:createElement创建节点 / appendChild添加 / insertBefore添加前 / replacChild替换 / removeChild / cloneNod

最新推荐文章于 2023-05-08 01:24:06 发布
最新推荐文章于 2023-05-08 01:24:06 发布
阅读量898 收藏 1
点赞数
分类专栏： JavaScript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/kino2046/article/details/104886478
版权

createElement 创建节点

        语法：element document.createElement("tagName")

                参数：tagName 标签名称

                返回值：创建好的节点

appendChild 添加节点

        el.appendChild(node)  在元素的末尾添加一个子级

insertBefore 在旧节点前添加节点

        el.insertBefore(newNode,oldNode) 在 oldNode 前边添加入 newNode 

        在使用 appendChild 和 insertBefore时，如果添加是一个页面上已经存在的节点，会先从原位置删除，然后在添加到新的位置去。

replacChild替换节点

        el.replacChild(newNode,oldNode)       返回值是替换掉的旧节点

removeChild 删除子元素

        parent.removeChild(el) 删除掉某个子元素

        .remove兼容性差点

cloneNode 克隆节点

        node.cloneNode(deep)          - deep: 默认为false

                - deep 为 true, 克隆元素及属性，以及元素的内容和后代，深度克隆

                - deep 为 false, 只克隆元素本身，及它的属性，浅克隆

createDocumentFragment 文档碎片

        innerHTML一次性添加，性能高

kino2046
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html5中JavaScript removeChild 删除所有节点
09-28
通过JavaScript可以删除所有节点，本文里主要讨论 removeChild 函数，大家可以看看下面的示例
【Javascript】remove()删除当前节点和removeChild()删除子节点用法
学习 记录 总结 分享
06-26 3462
介绍Javascript removeChild()删除子节点的方法，具体详情如下所示：在Javascript中，。
element.append() node.appendChild() Element.prototype.append() Node.prototype.appendChild()
kfepiza的博客
05-08 484
方法在元素的最后一个子元素之后插入一组Node对象或DOMString对象。DOMString对象作为等效Text节点插入。语法参数要插入的一组Node或DOMString对象。异常HierarchyRequestError：无法在层次结构中的指定点插入节点。示例附加元素追加文本追加元素和文本append方法是不可分的append()方法的作用域未限定在with语句中。有关详细信息，请参见Symbol.unscopables。规范文档浏览器兼容性参阅。
vue 项目 二维码吗引入 报错 el.appendChild is not a function
shanshanbao的博客
05-27 1950
vue 项目 二维码吗引入 报错 el.appendChild is not a function
使用appendChild（）和createElement（）方法实现留言板
huzijia888的博客
11-15 1531
#section1{ width:480px; height:260px; border:1px solid; } #liu{        width:480px;    } .ti{ font-size:15px; font-style:bold; width:476px; } .con{ font-size:10px; width:476px; } .zz{
头歌教学实践平台 Web前端开发基础 JavaScript学习手册十四：HTML DOM-文档元素的操作（二）
最新发布
01-20
`createElement()`创建新的元素，`appendChild()`或`insertBefore()`用于将新元素插入到文档中。例如，`var newElement = document.createElement('div'); document.body.appendChild(newElement);`会在页面底部添加...
dom-living-examples:一些原生JS操作DOM实例
05-25
例如，`innerHTML`用于获取或设置元素的HTML内容，`innerText`用于文本内容，`appendChild`和`removeChild`用于添加和删除子元素，`insertBefore`用于在特定位置插入新元素。 3. **事件处理**：DOM支持事件监听和...
DOM访问/创建/删除/修改文档节点及属性方法
09-12
DOM 访问、创建、删除、修改文档节点及属性方法 DOM（Document Object Model）是 HTML 和 XML 文档的编程接口，允许开发者使用脚本语言（如 JavaScript）来访问和操作文档的结构和内容。在这里，我们将详细介绍 DOM...
manipulating-dom-for-beginners:训练DOM操作的基本概念
03-11
6. **创建与插入新元素**：`document.createElement()`用于创建新的DOM元素，然后可以通过`appendChild`、`insertBefore`或`replaceChild`方法将其插入到DOM树的适当位置。 7. **DOM操作性能**：由于DOM操作可能...
DOM-manipulation:DOM操作的简要研究资源
03-17
- **插入元素**：`appendChild`、`insertBefore`和`replaceChild`等方法用于在DOM树中添加、插入或替换元素。 - **删除元素**：`removeChild`方法用于删除指定的子节点。 - **修改元素属性**：`getAttribute`和`...
dom元素操作的常用方法（创建、添加、删除、修改属性）
wanghe1111_的博客
03-05 2952
dom元素操作（创建、添加、删除、修改属性）
节点操作-创建createElement||appendChild-/追加-/插入insertBefore-/替换replaceChild-/删除remove-克隆元素 cloneNode（增删改查）
不懂帕斯的博客
04-23 1127
01-节点操作-创建元素·createElement||appendChild <body> <div class="box"> <span>我是前端小白</span> </div> <script> // 创建元素：document.createElement('标签名') let div = document.createElement('div')
对Dom树的操作 appendChild ,createElement,childNodes,createTextNode
studyflex的专栏
02-12 1336
window.onload=function()...{    //????    var hello = document.getElementById(hello);    hello.className="declared";        var empty = document.getElementById(empty);    addNode(empty,"reader o
java给xml添加多个相同节点_创建xml文件的缩进与添加相同子节点
weixin_34319902的博客
02-26 1088
//之前之所以添加的book节点会覆盖前面的book节点，是因为变量名都相同，这样的话自然下面的要替换上面的值public static void main(String[] args) {new TestXml().createXml();}public void createXml(){DocumentBuilder db=getDocumentBuilder();Document docum...
dom节点操作（节点的创建与追加、删除与替换节点的方法。）
weixin_56976215的博客
08-11 1340
插入节点:document.insertBefore(“”,“”)创建节点: document.creatElement(“”)追加节点:document.appendChild(“”)父元素.replaChild(替换，被替换)父元素.removeChild(tag)写入js代码后的页面效果。
DOM学习实用路线（6）——DOM节点操作之创建节点和添加节点
xiao廸要飞
04-09 454
节点操作 创建节点 语法：element document.createElement(“tagName”); 创建一个节点 参数：tagName 标签名称 返回值：创建好的节点 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta nam...
添加、删除节点
YourLie_in_April的博客
05-14 1143
节点操作： 添加(创建)节点顺序： 1、创建一个空对象 只能用document调用。 let a = document.createElement("a"); 2、为空元素添加关键属性和内容。 a.href = "http://www.baidu.com"; a.innerHTML = "跳转链接"; 3、再将空元素加载到DOM树中，前提是先找到父元素，用父元素调用函数，添加到自己的子元素中。 添加方式： 1、添加（追加）到一个父元素下所有子元素末尾。 document.body.app
创建并添加新节点，删除，替换和克隆
romeomama的专栏
10-09 350
创建标签节点：document.creatElement(tagName)； 创建文本节点：document.createTextNode(msg)； 添加节点：appendChild(); innerText=“”节点文本内容；如果有代码也作为纯文本显示 innerHtml属性可以解析内部带有html代码的玩呢吧 divNode.innerHTML="haha,zheshi quyu"
vue的视图化创建项目_进一步了解 Vue 在初始化视图时创建新文档的实现逻辑
weixin_39858132的博客
12-29 113
进一步了解 Vue 在初始化视图时创建新文档的实现逻辑发布于2020-10-16阅读714一、首先我们了解下， Vue 源码中创建新文档的函数是怎样的。二、初识源码后，如果带着疑惑，我们则还需理解以下几个知识点。1、document.createDocumentFragment描述：创建一个新的空白文档片段。文档片段存在于内存中，并不在 DOM 树中。通常的用法是：1、创建文档片段；2、将元素...
在 DOM 操作中怎样创建、添加、移除、替换、插入和查找节点？
03-12
2. 添加节点：使用 appendChild() 方法将一个节点添加到另一个节点的子节点列表的末尾。 3. 移除节点：使用 removeChild() 方法从父节点中删除一个子节点。 4. 替换节点：使用 replaceChild() 方法将一个节点替换...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值