JS DOM创建和添加元素节点

最新推荐文章于 2024-04-10 10:59:25 发布
最新推荐文章于 2024-04-10 10:59:25 发布
阅读量1.2k 收藏
点赞数
分类专栏： JS 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_46275230/article/details/124236448
版权

JS DOM创建和添加元素节点

文章目录

第一种: createElement() + createTextNode() + appdChild()

<body>
  <script>
    let oP = document.createElement("p")
    let oText = document.createTextNode("小情歌")
    oP.appendChild(oText)
    document.body.appendChild(oP)
  </script>
</body>

请添加图片描述

第二种: innerHTML

<body>
  <script>
    let str = "<p>小情歌</p>"
    document.body.innerHTML += str
  </script>
</body>

请添加图片描述

第三种: document.write()

<body>
  <script>
    document.write("<p>小情歌</p>")
  </script>
</body>

请添加图片描述

第四种 : A.insetBefore(B,C)

在A标签中,将B标签添加到C标签之前

<body>
  <div class="wrap">
    <span class="c">王五</span>
  </div>
  <span class="b">张三</span>
  <script>
    let oWrap = document.querySelector(".wrap")
    let oB =   document.querySelector(".b")
    let oC =   document.querySelector(".c")

    oWrap.insertBefore(oB,oC)

  </script>
</body>

请添加图片描述

OGoodness
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
javascript创建新元素并增加到DOM
qq_46358639的博客
02-20 1462
javascript创建新元素并增加到DOM 今天学到的新知识 ## 总结： 要把一个新元素增加到DOM，首先需要创建这个元素，然后增加这个元素作为某个元素的子元素。 使用document.createElement(elementName)可以创建一个新元素。 要在DOM中增加一个元素作为某个父元素的子元素，需要得到这个父元素的句柄，并对父元素调用appendChild(),传入要增加的子元素...
JS实现动态添加DOM节点和事件的方法示例
10-19
主要介绍了JS实现动态添加DOM节点和事件的方法,涉及javascript事件响应及针对页面dom元素节点与属性的动态操作相关实现技巧,需要的朋友可以参考下
JS之DOM增添元素节点
m0_56174842的博客
01-29 298
JS之DOM
DOM节点的创建、插入、删除等经验集合，2024年最新新鲜出炉的蚂蚁金服面经
最新发布
QAZZHONGYI的博客
04-10 500
打开全栈工匠技能包-1小时轻松掌握SSR两小时精通jq+bs插件开发生产环境下如歌部署Node.js网易内部VUE自定义插件库NPM集成谁说前端不用懂安全，XSS跨站脚本的危害webpack的loader到底是什么样的？两小时带你写一个自己loader。
带你彻底学会JS DOM技术之创建，插入元素
大河之犬的博客
10-06 4644
所谓的“动态DOM”，指的是使用JavaScript创建的元素。来创建一个文本节点，然后可以将元素节点与文本节点“组装”成我们平常看到的“有文本内容的元素”。方法把已经创建好的“有内容的strong元素”插入到div元素中，这时才会显示出内容。动态创建了一个strong元素，但是此时strong元素是没有内容的。//将strong元素插入div元素（这个div在HTML已经存在）方法将一个新元素插入到父元素中的某一个子元素“之前”A表示父元素，B表示新子元素。把一个新元素插入到父元素的内部子元素的“末尾”
JS 创建dom元素
weixin_39501680的博客
03-27 81
JS 创建dom元素
JavaScript 给HTML DOM 添加新元素
AirZilong的博客
12-26 2680
学习RN之前，对JS的储备知识：给HTML DOM 添加新元素，所以要添加标签，记录学习过程 这是一个段落。 这是另一个段落。 var para=document.createElement("p"); var node=document.createTextNode("添加一个airzilong"); para.appendChild(node); var element=d
JS添加或删除HTML dom元素的方法实例分析
10-17
主要介绍了JS添加或删除HTML dom元素的方法,结合实例形式分析了javascript针对HTML DOM元素节点的创建、追加、删除等相关操作技巧与注意事项,需要的朋友可以参考下
JS实现DOM节点插入操作之子节点与兄弟节点插入操作示例
10-18
主要介绍了JS实现DOM节点插入操作之子节点与兄弟节点插入操作,涉及JavaScript节点的创建、添加简单操作技巧,需要的朋友可以参考下
JS实现添加,替换,删除节点元素的方法
10-22
主要介绍了JS实现添加,替换,删除节点元素的方法,实例分析了javascript针对节点元素的替换、删除及常用的几种添加技巧,需要的朋友可以参考下
基本DOM节点操作
11-26
1、获取元素节点 getElementById()：获取指定唯一id的元素。 getElementByTagName()：获取指定元素标签名的元素数组。 getElementByName()：获取具有指定属性name的元素数组。 2、子节点 element.childNodes：返回该...
js创建、添加、插入、删除dom元素
qq_42804737的博客
08-20 2548
创建：document.creatElement(domName) 添加：obj.append(newDom) 插入：parentDom.insertBefore(newDom, oldChildDom) 删除：obj.remove(childDom) <!DOCTYPE html> <html lang="en"> <head> <meta cha...
JS：操作DOM元素（增、删、改、查）
weixin_48475463的博客
02-03 2632
一、增 1. 创建一个节点 createElement、createTextNode <body> <div> <p> <span>李沁，我喜欢你！</span> </p> </div> <script> var div = document.querySelector('div'); var
web前端学习（四十二）——JavaScript DOM元素（添加、移除及替换）、DOM集合（Collection）、DOM节点列表（NodeList）
胜天半子祁同伟
02-23 9002
web前端学习（四十二）——JavaScript DOM元素（添加、移除及替换）、DOM集合（Collection）、DOM节点列表（NodeList）
原生js中如何添加dom元素
热门推荐
zl13015214442的博客
05-22 3万+
1. appendChild() 概念：把要添加的节点添加到指定父级里面的最后面，所以也叫追加。 使用方式：fatherdom.appendChild( insertdom )。 兼容性：所有浏览器都支持此方法。 2. insertBefore() 概念：把要插入的节点添加到指定父级里面的指定节点之前。 使用方式：fatherdom.insertBefore( insertdom，chose...
核心原声JavaScript添加DOM元素
zhangqling的博客
09-28 1052
 1、document.createElement();用来添加元素，括号内属性为要添加元素标签名。 2、appendChild(子节点);把一个元素插到父级上去，默认插到最后。 3、insertBefore(子节点 ,位置);和appendChild()用法类似，但是可以选择位置。 &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head...
JS中的DOM操作属性、DOM创建、DOM增加、DOM修改、DOM删除以及DOM获取非行间样式
王春燕的博客
04-26 5206
当网页被加载时，浏览器会创建页面的文档对象模型DOM（Document Object Model），在DOM中，每个东西都是节点。 DOM四大操作：查找、更新、添加、删除 通过DOM，JavaScript 可创建动态的 HTML： 能够改变页面中的所有 HTML 元素 能够改变页面中的所有 HTML 属性 能够改变页面中的所有 CSS 样式 能够对页面中的所有事件做出反应 前提：首先找到相关元素，前面一篇博客，详细的说明了，如何查找相关的元...
代码片段】JS对在DOM文档中指定位置插入元素
html0010的博客
05-25 426
【代码】代码片段】JS对在DOM文档中指定位置插入元素。
js DOM节点的创建/插入/复制/删除/替换
蒲公英芽的博客
01-04 2113
创建DOM元素 document.createElement ( );所有的标签都可以使用这种方式来创建。 document.createDocumentFragment();创建一个碎片容器，主要用于直接给body放入多个。 document.createTextNode ( );创建文本节点。 img 和 canvas 元素可以使用 new 来创建，例如： var img = new Ima...
js 创建dom元素
07-28
要在JavaScript中创建DOM元素，可以使用以下方法： 1. 使用createElement方法创建元素节点： ```javascript const element = document.createElement('div'); ``` 2. 使用createTextNode方法创建文本节点： ```javascript const textNode = document.createTextNode('Hello, World!'); ``` 3. 使用appendChild方法将元素节点添加到父节点中： ```javascript const parentElement = document.getElementById('parent'); parentElement.appendChild(element); ``` 4. 使用setAttribute方法设置元素节点的属性： ```javascript element.setAttribute('class', 'my-element'); ``` 完整的示例代码如下： ```javascript // 创建元素节点 const element = document.createElement('div'); // 创建文本节点 const textNode = document.createTextNode('Hello, World!'); // 设置元素节点的属性 element.setAttribute('class', 'my-element'); // 将文本节点添加到元素节点中 element.appendChild(textNode); // 将元素节点添加到父节点中 const parentElement = document.getElementById('parent'); parentElement.appendChild(element); ``` 这样就可以使用JavaScript动态地创建和添加DOM元素了。记得替换代码中的'parent'为要添加元素的父节点的ID或选择器。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值