JS 新建元素并插入DOM树

最新推荐文章于 2024-06-25 19:24:28 发布
最新推荐文章于 2024-06-25 19:24:28 发布
阅读量269 收藏
点赞数
文章标签： javascript html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wwy6191/article/details/120632420
版权

一、insertAdjacentHTML

beforebegin 在元素自身的前面

afterbegin 插入元素内部的第一个子节点的前面

beforeend 插入元素内部的最后一个子节点的后面

afterend 在元素自身的后面

        var newli = ' <li class="current"> <span>新选项卡</span> <span class="close"></span></li>';
        that.ul.insertAdjacentHTML('beforeend', newli);
        // 想要给ul添加li

唯一3
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
js浏览器操作DOM之插入DOM
weixin_34205826的博客
08-16 632
当我们获得了某个DOM节点，想在这个DOM节点内插入新的DOM，应该如何做？ 如果这个DOM节点是空的，例如，<div></div>，那么，直接使用innerHTML = '<span>child</span>'就可以修改DOM节点的内容，相当于“插入”了新的DOM节点。 如果这个DOM节点不是空的，那就不能这么做，因为innerHTML会直接替...
javascript创建新元素并增加到DOM
qq_46358639的博客
02-20 1495
javascript创建新元素并增加到DOM 今天学到的新知识 ## 总结： 要把一个新元素增加到DOM，首先需要创建这个元素，然后增加这个元素作为某个元素的子元素。 使用document.createElement(elementName)可以创建一个新元素。 要在DOM中增加一个元素作为某个父元素的子元素，需要得到这个父元素的句柄，并对父元素调用appendChild(),传入要增加的子元素...
JS DOM 编程复习笔记--创建元素、插入元素（四）
小帅的编程笔记
10-20 673
今天我们来学习使用JS来动态创建DOM元素并插入的已有的HTML中。 要创建一个HTML元素，使用 document.createElement() 方法。 let element = document.createElement(htmlTag); document.createElement() 方法接受一个HTML标签名称并返回Element 类型的新节点。 1) 创建一个div元素 我们先来搞一个空的HTML文档 <!DOCTYPE html> <html> <hea
Javascript：增加DOM节点
最新发布
听海边涛声
06-25 317
Javascript：增加DOM节点
JavaScript 插入Dom节点
weixin_47556601的博客
02-15 4381
大家好，今天我们来分享JavaScript 插入Dom节点 首先我们要知道， 不管我们对Dom节点进行什么样的操作，都必须先获取这个节点，假如说，这个dom节点是空的，我们可以通过innerHTML就可以增加一个元素，假如这个dom节点不存在，那这样做就不行了，否则会造成覆盖（就是会将原先的数据改掉） 写源码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">
js 添加、删除DOM元素
qq_36158551的博客
03-09 1869
该方法添加的元素位于父元素的末尾，使用方法：parentNode.appenChild(NewNode) // parentNode是需要添加元素的容器，NewNode是新添加的元素${${
利用vue.js插入dom节点的方法
10-20
本篇文章将详细讲解如何在Vue.js中插入DOM节点，并探讨其与jQuery操作DOM的不同之处。 首先，Vue.js 提供了 `$mount` 方法用于创建组件实例并挂载到DOM中。例如，在给定的示例中，我们创建了四个组件：MyComponent...
JavaScript DOM节点操作实例小结(新建,删除HTML元素)
10-20
总的来说，JavaScript DOM节点操作是Web开发中不可或缺的一部分，无论是新建元素来增加页面内容，还是删除元素来实现动态更新，都体现了JavaScript在网页动态化方面的强大能力。在实际项目中，开发者还需要注意性能...
JS DOM元素的增删改
weixin_45060872的博客
03-22 502
JS DOM元素的增删改DOM元素动态操作向页面添加元素appendChildinsertBeforeDOM元素动态操作向页面删除元素removeChidDOM元素动态操作向页面修改元素案例 DOM元素动态操作向页面添加元素 除了document.write、innerHTML、document.createElement(“标签名”) 直接在页面创建元素外， 还可以用appendChild和in...
vue 如何生成一个dom元素_vue：虚拟dom的实现
weixin_34245171的博客
01-16 7875
Vitual DOM是一种虚拟dom技术，本质上是基于javascript实现的，相对于dom对象，javascript对象更简单，处理速度更快，dom树的结构，属性信息都可以很容易的用javascript对象来表示：let element={tagName:'ul',//节点标签名props:{//dom的属性，用一个对象存储键值对id:'list'},children:[//该节点的子节点{t...
JavaScript中DOM操作详解
hizyk的博客
11-24 655
声明：本人的所有博客皆为个人笔记，作为个人知识索引使用，因此在叙述上存在逻辑不通顺、跨度大等问题，希望理解。分享出来仅供大家学习翻阅，若有错误希望指出，感谢！ 节点层次 DOM可以将任何HTML或XML文档描绘成一个由多层节点构成的结构 文档元素是文档的最外层元素，文档中的其他元素都包含在文档元素中，每个文档只能有一个文档元素，在html页面中，文档元素始终是<html>元素 每一段标记都可以通过树中的一个节点表示，总共有12种节点类型，这些类型都继承自一个基类型：node Node类型
JS-添加元素的步骤创建空元素、设置关键属性、将元素添加到DOM树
weixin_47295886的博客
07-21 587
createElement appendChild insertBefore 文档片段
js之动态添加dom结点
Limoaaa的博客
07-06 1821
最近在照着慕课网上的视频教程做一些有关css3的小动画，发现css3着实强大，给js编写减轻了很多负担，以前一丢丢的小特效就得靠一段又一段的js代码去实现，现在学习css3之后，简单的几行css代码就可以轻松搞定，当然浏览器的兼容性还是个问题。。。我的愿望是世界和平。。我的愿望是所有的浏览器用户将IE升级到至少8，最好10，11。。。 这两天在慕课学习了带预览图的幻灯片课程，发现了js添加结点的
原生js中如何添加dom元素
热门推荐
zl13015214442的博客
05-22 3万+
1. appendChild() 概念：把要添加的节点添加到指定父级里面的最后面，所以也叫追加。 使用方式：fatherdom.appendChild( insertdom )。 兼容性：所有浏览器都支持此方法。 2. insertBefore() 概念：把要插入的节点添加到指定父级里面的指定节点之前。 使用方式：fatherdom.insertBefore( insertdom，chose...
带你彻底学会JS DOM技术之创建，插入元素
大河之犬的博客
10-06 4974
所谓的“动态DOM”，指的是使用JavaScript创建的元素。来创建一个文本节点，然后可以将元素节点与文本节点“组装”成我们平常看到的“有文本内容的元素”。方法把已经创建好的“有内容的strong元素”插入到div元素中，这时才会显示出内容。动态创建了一个strong元素，但是此时strong元素是没有内容的。//将strong元素插入div元素（这个div在HTML已经存在）方法将一个新元素插入到父元素中的某一个子元素“之前”A表示父元素，B表示新子元素。把一个新元素插入到父元素的内部子元素的“末尾”
JS常见Dom节点操作
qq_43712187的博客
05-31 391
一、创造节点 1.1、创建标签节点：document.createElement(); var Div=createElement("标签名")； 例子： var snakeDiv=document.createElement("div");-----创建一个div元素， 因为是document对象的方法。 snakeDiv.setAttribute("class","snake"); 1.2、...
JS DOM基本操作之创建、插入、删除、替换节点操作
qq_45560350的博客
08-23 5160
创建dom节点（并未添加到页面中，一般配合插入方法使用） document.createElement(); 创建一个元素节点 var div = document.createElement('div'); 可以看到虽然创建了div节点，但页面中并没有显示 因为这里只是创建div节点，并没有把它添加到页面中 document.createTextNode(); 创建一个文本节点 var text = document.createTextNode('殷志源'); 没有添加到页面中 do
JS学习：DOM基础，文档碎片以及操作元素属性的3种方法
qq_43955202的博客
04-26 765
一.DOM 1.创建DOM 2.插入DOM 3.删除DOM 1.获取元素 Window.onload = function () { } window.onload = function () { var oBtn = document.getElementById('btn1'); var oUl = document.getElementById('ul1'); //获取元素 oBtn.on...
JavaScript操作DOM：动态创建与删除元素
通过深入理解并熟练运用上述概念和技术，开发者可以利用JavaScript和DOM实现丰富的交互式网页功能，如响应用户操作、更新页面内容、动画效果等。同时，学习JavaScript操作DOM也是实现现代Web应用动态特性的基础。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值