（23）使用DOM插入新元素，每次插入的新节点放在最前面

最新推荐文章于 2023-05-24 22:39:16 发布
最新推荐文章于 2023-05-24 22:39:16 发布
阅读量8.3k 收藏 3
点赞数
分类专栏： JavaScript案例解析
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Xuan6251237011/article/details/37937699
版权
本文介绍了如何使用DOM操作在列表中插入新元素，并使其始终显示在列表的最前面。关键在于，当列表为空时，使用appendChild方法；否则，使用insertBefore方法来确保新节点被正确地前置。
摘要由CSDN通过智能技术生成

要求每次新插入的新li节点出现在最前面，则用insertBefore方法，但是如果开始没有li标签的话，直接用insertBefore方法会出错，所以此处必须作一判断：如果没有li标签，则用appendChild方法（一般情况下是第一次插入的时候），如果有li标签，就用insertBefore方法插入。

<!DOCTYPE HTML>
<!--
	DOM创建元素，①创建li，②再插入相应的父级中去。每次插入的新节点都是放在最前面的
-->
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
	window.οnlοad=function ()
	{
		var oBtn=document.getElementById('btn1');
		var oU1=document.getElementById('ul1');
		var oTxt=document.getElementById('txt1');
		var aLi=oU1.getElementsByTagName('li');//获取所有的li
		oBtn.οnclick=function ()
		{
		  var oLi=documen
了解本专栏 订阅专栏 解锁全文 超级会员免费看
无人与我共黄昏
关注
专栏目录
订阅专栏
JavaScript WebAPI 系列二 排他思想；自定义属性（包括h5新增的data-）；父、子、兄弟节点；创建、添加、删除、复制节点
m0_55170432的博客
03-29 248
1.0 操作元素–排他思想 如果有同一组元素，我们想要某一个元素实现某种样式， 需要用到循环的排他思想算法： 所有元素全部清除样式（干掉其他人） 给当前元素设置样式 （留下我自己） 注意顺序不能颠倒，首先干掉其他人，再设置自己 // 1. 获取所以按钮元素 var btns = document.getElementsByTagName('button'); // btns 得到的是伪数组 里面的每一个元素 btns[i] for (v
JS 之如何在插入元素时插在原有元素的前面而不是末尾
10-10 766
语法： 父级.insertBefore（新元素，被插入的元素）； //在指定的元素前面加入一个新元素 父级.insertBefore（新元素，父级.children[0]）;　　//在第一个元素的前面插入一个元素，在IE下如果第二个参数的节点不存在，则会报错，若是其他浏览器，则会默认以appendChild的形式添加，不会报错 　　...
dom4j往父节点最前面添加子节点(让新添加的节点在最前面而不是最后面)
java_qq_99811494的网络笔记
02-23 3117
前言:这个问题以前遇到过,也费时费力解决了.最近又用到了,结果忘记怎么做的了.又一次到百度各种搜索,无奈各种重复回答,还是个错误的答案!!所以记录在此,以备后患. Element e = DocumentHelper.createElement("节点名"); // e.addAttribute("属性名","属性值"); //do something else... e.getParent()
js 节点插入时候 新节点永远放在第一个位置
最新发布
小墨蛇的博客
05-24 1589
方法将新节点插入到父节点的第一个位置，即。，然后创建一个新的子节点。这段代码首先获取父节点。
DOM插入元素-----插入到元素前面
weixin_30332705的博客
03-19 570
插入元素的方法，注意的是：list为child的时候才能够插入到元素中 varnewChild=document.createElement('A'); newChild.appendChild(document.createTextNode('chorme')); newChild.setAttrib...
JS实现DOM节点插入操作之子节点与兄弟节点插入操作示例
10-18
在JavaScript中，可以通过`document.createElement()`方法创建一个新的元素节点，这将返回一个代表新元素的DOM对象。例如，`var obj = document.createElement("p");`将会创建一个新的`<p>`标签节点。 知识点3：...
JS实现的DOM插入节点操作示例
11-28
`insertBefore()`方法是JavaScript DOM中的一个重要函数，它允许我们在已有子节点的前面插入一个新的子节点。方法的基本语法如下： ```javascript node.insertBefore(newNode, refNode); ``` - `newNode`：表示要...
JQuery插入DOM节点的方法
10-24
使用prependTo()后，新元素会出现在旧内容的最前面。 5. after()方法：此方法在每个匹配元素之后插入内容。例如，如果有元素和字符串"你好"，使用after()方法后，"你好"会被添加到元素之后。 6. insertAfter()方法...
jQuery实现在最后一个元素之前插入新元素的方法
10-23
本文主要介绍了使用jQuery实现在指定容器的最后一个元素之前插入新元素的方法。这个技巧在动态内容加载、页面布局调整等方面非常实用。 首先，我们需要了解jQuery的核心概念之一——选择器。jQuery提供了非常丰富和...
js 原生将元素插入到父元素首位，jquery和原生两种方式
业余前端的职业经历
03-08 7186
一般来说我们新加的元素会放置到父元素的首位 但也有放到首位的那种可能，每次追加元素 放到最前面 业务还是有这种需求的 可能 用jquery的童鞋 会对 append 这个方法很熟悉 当然 用框架的童鞋 就不用考虑这个问题了 直接就是数据驱动 的 直接关注数据业务层就行了 少去了很多麻烦 这里就讲解下 js原生 和jq两种方式 将元素插入到首位吧 写之前 先声明下 dom结构吧 <div class="parent"> <h1>hello worl...
element 往node里面增加属性值_【JavaScript 教程】DOM——Node 接口
weixin_39830175的博客
11-30 500
作者 | 阮一峰所有 DOM 节点对象都继承了 Node 接口，拥有一些共同的属性和方法。这是 DOM 操作的基础。1、属性1.1、Node.prototype.nodeTypenodeType属性返回一个整数值，表示节点的类型。document.nodeType // 9上面代码中，文档节点的类型值为9。Node 对象定义了几个常量，对应这些类型值。document.nodeType ...
vue面试题十二：一 es6数组的一些函数方法使用、 二 this的指向问题、 三 createDocumentFragment用法、 四 javascript实现把指定元素移动到第一位
Dormiveglia-flx的博客
08-22 460
一 es6数组的一些函数方法使用、 二 this的指向问题、 三 createDocumentFragment用法、 四 javascript实现把指定元素移动到第一位、 五 el-menu简单用法
总结js常用的dom操作API
shadow_zed的博客
03-04 471
总结js常用的dom操作 前言 很多同学用惯了jquery操作dom，让他们用js操作的时候，常常力不从心，本文总结了常用的js的dom操作方法，供大家翻阅！其实说起js操作dom，我很久很久之前有篇文章，jquery属性的相关js实现方法,里面囊括了很大一部分js操作dom的常用方法，但是不是很系统。不能说是API，今天来系统总结一下！ 节点查找API document.getElem...
数据结构--知识点16--搜索算法(二叉树)
ANingL的博客
09-06 3121
文章目录一、树的概念1、特点2、树的术语3、树的种类4、树的存储与表示5、常见的树的应用场景二、二叉树1、概念2、性质 一、树的概念 树是一种抽象数据类型(ADT)或是视作这种抽象数据类型的数据结构 1、特点 每个节点有零个或多个子节点 没有父节点的节点称为根节点 每一个非根节点有且只有一个父节点 除了根节点外，每个子节点可以分为**多个不相交(因为都只有一个父节点)**的子树 2、树的术语 节点的度：一个节点含有的子树的个数称为该节点的度 树的度：一棵树中，最大的节点的度称为树的度 叶节点或终端节点
element 方法返回的boolean被当成字符串了_13个需要知道的方法：使用 JavaScript 来操作 DOM...
weixin_39914049的博客
11-30 163
作者：Milos Protic 译者：前端小智来源：impressivewebs.DOM 或文档对象模型是 web 页面上所有对象的根。它表示文档的结构，并将页面连接到编程语言。它的结构是一个逻辑树。每个分支结束于一个节点，每个节点包含子节点、对象。DOM API非常庞大，在本文中，咱们只讨论比较常用有有用的那些API。document.querySelector & document.q...
【数据结构与算法python】树的实现
思南的博客
09-09 984
方法一：树的嵌套列表实现 1、定义 借助Python List来实现二叉树树数据结构，采用递归的嵌套列表实现二叉树， 由具有3个元素的列表实现： [root，left，right] 第1个元素为根节点的值； 第2个元素是左子树（所以也是一个列表）； 第3个元素是右子树（所以也是一个列表）。 以下图为例，一个6节点的二叉树 根是myTree[0]，左子树myTree[1]，右子树myTree[2] 该树的嵌套列表表示方式如下： tree = ['a', ['b', ['d',[],[]],
JAVAScript基础学习--dom节点操作
weixin_47200160的博客
06-08 848
节点属性 1.childNodes 返回包含被选节点的子节点的 NodeList ​ 如果选定的节点没有子节点，则该属性返回不包含节点的 NodeList。 ​ 如需循环子节点列表，使用 nextSibling 属性，要比使用父对象的 childNodes 列表效率更高。 2.firstChild 返回被选节点的第一个子节点,如果选定的节点没有子节点，则该属性返回 NULL。 ​ 获取指定元素的第一个子节点，可以是元素节点，也可以是文本节点。 3.lastC...
ihtml2document能不能根据id获取dom_DOM操作填坑（一）
weixin_39642761的博客
12-01 191
记录我学习过程容易犯的错误。 统筹至库里了：https://kathy_candy.gitee.io/front-end-learning/index.html 本文链接：https://kathy_candy.gitee.io/front-end-learning/program-summary/article-html/DOM%E6%93%8D%E4%BD%9C%E5%A1%AB%E...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值