创建、追加、插入、删除DOM元素

最新推荐文章于 2024-03-09 14:57:39 发布
最新推荐文章于 2024-03-09 14:57:39 发布
阅读量319 收藏 1
点赞数
分类专栏： 前端 文章标签： javascript css3 es6 html5 node.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yycnf/article/details/109707253
版权

创建、追加、插入、删除DOM元素

创建一个节点:    document.createElement('标签名')

var oDiv = document.createElement('div');//创建一个div标签

追加一个节点：父节点.append('子节点')

插入元素：

         insertBefore(节点,原有节点)    在已有元素前插入

删除DOM元素

        removeChild(节点)     删除一个节点

创建、追加、插入、删除DOM元素代码演示如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>创建、插入、追加、删除元素</title>
    <script>
        window.onload = function () {
            var btn = document.getElementById('btn');
            var txt = document.getElementById('txt');
            var ul1 = do
最低0.47元/天 解锁文章
余一痴
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
创建节点追加到已有的元素上
weixin_45147894的博客
10-15 335
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-widthh, initial-scale=1.0"> <title>Document</title> </head> <body> <...
插入和追加内容到DOM的函数
huangbomeizi的专栏
10-31 472
 //创建元素function create(elem){ return document.createElementNS ?  document.createElementNS(http://www.w3.org/1999/xhtml,elem):  document.createElement(elem);}//插入和追加的辅助函数function checkElem(a){ var r
DOM:常用添加/删除元素.
weixin_53542481的博客
03-10 1163
HELLO!大家好! 今天的笔记是DOM常用添加/删除元素. (1). 只添加一个新元素: 3步 a. 创建一个新元素: var 新元素=document.createElement("标签名") b. 为元素设置关键属性: 新元素.属性名="属性值"; c. 将新元素添加到DOM树: 3种: 1). 末尾追加: 父元素.appendChild(新元素) 2). 在某个元素前插入: 父元素.insertBefore(新元素, 现有元素) 3). 替换某个元素: 父元素.replaceChild(新元
DOM 元素的创建和追加
YCHH1的博客
05-05 819
DOM 的高级操作 创建节点 createElement("tagName“) 创建元素节点 createAttribute(“attrName”) 创建属性节点 createTextNode(“string”) 创建文本节点 属性追加到元素 setAttributeNode(attr) 将创建的属性节点追加到元素上去 追加节点 appendChild(childNode) 向指向节点结尾添加一个新的子节点 插入和替换节点 insertBefore(newnode,oldnod
jQuery-DOM节点的插入
ssisse的博客
05-08 782
本文转自慕课网 内部插入append()与appendTo() 动态创建的元素是不够的，它只是临时存放在内存中，最终我们需要放到页面文档并呈现出来。那么问题来了，怎么放到文档上？ 这里就涉及到一个位置关系，常见的就是把这个新创建的元素，当作页面某一个元素的子元素放到其内部。针对这样的处理，jQuery就定义2个操作的方法 append：这个操作与对指定的元素执行原生
Dom-增加、删除
weixin_30815427的博客
09-06 215
一、增加 添加一个元素分为3个步骤： 1.创建一个空元素对象 var a=document.createElement("a") 2.设置关键属性 a.href="www.baidu.com"; a.innerHTML="go to b...
DOM节点的增加删除
xaiozhao的博客
05-02 1206
通过DOM对节点进行增加删除操作
DOM——创建节点及节点属性与内部插入append()和appendTo()
weixin_33889665的博客
11-12 232
创建节点及节点属性与内部插入append()和appendTo() 1 创建流程 创建节点（常见的元素、属性和文本） 添加节点的一些属性 加入到文档中 2 流程中涉及的方法 创建元素document,creat 设置属性setAttrilbute 添加文本innerHTML 加入文档appen...
js 添加、删除DOM元素
最新发布
qq_36158551的博客
03-09 1446
该方法添加的元素位于父元素的末尾，使用方法：parentNode.appenChild(NewNode) // parentNode是需要添加元素的容器，NewNode是新添加的元素${${
ES6 - 原生js遍历DOM - document.querySelectorAll(‘.xx‘)、给DOM元素添加、删除类名 - dom.classList.add、切换类名toggle
Rudon滨海渔村的博客
05-27 1217
原生js遍历DOM 原生js给DOM元素添加、删除类名 // 获取所有xxx类的DOM var doms = document.querySelectorAll('.xxx'); // 遍历 doms.forEach((one)=>{ // 添加类名 one.classList.add('colorRed'); // 删除类名 one.classList.remove('colorRed'); // 来回切换类名 one.classList.toggle('colorRed
ES6 字符串新增的方法
DOM曼珠沙华的博客
05-12 328
字符串新增的方法 1.String.fromcodePoint() 可识别大于 0xFFFF的字符，弥补了String.formCharCode()方法的不足。在作用上，正好与下面的codePointAt()方法相反。 String.fromCodePoint(0x20BB7) // "????" String.fromCodePoint(0x78, 0x1f680, 0x79) === 'x\uD83D\uDE80y' // true 上面代码中，如果String.fromCodePoint方法
操作DOM（一）：创建节点、插入节点
weixin_41897680的博客
02-26 4461
创建节点 创建元素 原生：使用createElement()方法创建新元素，并返回新建元素的引用。该方法只有一个参数，用来指定创建元素的标签名称。如果要把创建的元素添加到文档中，还需要调用appendChild方法来实现 例： var el=document.createElement('p'); document.body.appendChild(el); jQuery：直接使用$(html)...
【DOM】DOM操作之如何添加、删除、替换元素_04
青春木鱼的博客
05-19 6966
本文将详细介绍如何使用DOM操作添加、删除、替换元素。我们使用document.createElement("标签名")来创建元素，使用父元素.removeChild(子元素)来删除子元素。另外，用createElement创建的新元素对象，暂时是游离在内存中，并没有被加入到DOM树。而浏览器显示哪些元素，完全依照DOM树的内容来生成。所以，新元素不会被浏览器加载到页面上，用户暂时是看不到的！因此，今后只要创建新元素，最后一步都是将新元素添加到DOM树上指定的父元素下。
DOM 删除操作
m0_63574519的博客
05-19 777
A.removeChild(B) 表示删除A标签里面的子元素B 只能互为父子关系才可以使用 A.remove() 表示直接删除A元素本身 代码展示： <!DOCTYPEhtml> <htmllang="en"> <head> <metacharset="UTF-8"> <metahttp-equiv="X-UA-Compatible"content="IE=edge"> <metanam...
原生 ES6极简删删除节点 箭头函数，正则，call
pardon110的博客
11-03 1165
// html结构    需求：把与Web开发技术不相关的节点删掉    &lt;ul id="t-list"&gt;        &lt;li&gt;JavaScript&lt;/li&gt;        &lt;li&gt;Swift&lt;/li&gt;        &lt;li&gt;HTML&lt;/li&gt;        &lt;li&gt
JS删除DOM元素的两种方法
热门推荐
小龙在线
10-13 15万+
删除子节点 var box=document.getElementById("box"); box.parentNode.removeChild(box); 删除自身 var box=document.getElementById("box"); box.removeNode(true); 参考：https://blog.csdn.net/staywithc/article/details/3...
DOM基础之删除元素
ch_musk的博客
06-30 3913
在JavaScript中，我们可以使用removeChild()方法来删除父元素下的某个子元素。 语法： A.removeChild(B); 说明： A表示父元素，B表示父元素内部的某个子元素。 举例： <!DOCTYPE > <html> <head> <title ></title&gt...
JavaScript 删除Dom节点
weixin_47556601的博客
02-15 6845
大家好，今天我们来分享一下JavaScript 删除Dom节点 在JavaScript当中，删除节点的步骤： 先获取到父节点，再通过父节点来删除自己（子节点） 这里，提醒一下，自己不可以删除自己 看源码： ```bash <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head&gt
对于Dom的操作----document增加删除修改dom节点
普罗旺斯_浅笑的博客
03-06 2260
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;script src="js/jquery.js"&gt;&lt;/script&gt; &lt;title&gt;&lt;/title&gt; &lt
追加dom元素的方法
09-09
追加DOM元素的方法有多种。可以使用以下两种方法之一： 1. 创建一个新的空元素对象，为新元素添加必要属性，然后将新元素添加到DOM树上指定父元素下。有三种具体方式来将新元素添加到父元素下： a. 在父元素下末尾...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值