JS-案例-插入节点

最新推荐文章于 2023-01-23 11:32:12 发布
最新推荐文章于 2023-01-23 11:32:12 发布
阅读量482 收藏 1
点赞数
分类专栏： 技能-前台 文章标签： javaScript DOM 插入节点
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cuigaochong/article/details/48194105
版权

需求：在一个节点后插入一个新节点；

代码实现：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>

<script type="text/javascript">

	//js只提供insertBefore,现在自己写函数事项insertAfter
	window.onload = function()
	{
		alert(1);
		var cityNode = document.getElementById("city");
		var xjNode = document.getElementById("xj");
		var appleNode = document.getElementById("apple");
		
		//cityNode.insertBefore(appleNode, bjNode);
		
		insertAfter(appleNode,xjNode);
		
	};
	//自定义实现insertAfter 将新节点插入到老节点的后边
	//实现逻辑：如果要增加的节点是最后一个节点,直接在父节点下增加
	//如果不是父节点的最后一个节点，则在该节点的下一个节点调用insertBefore
	function insertAfter(newNode,refNode)
	{
		var parentNode = refNode.parentNode;
		if(parentNode)
		{
			var lastNode = parentNode.lastChild;
			
			if(refNode==lastNode)
			{
				parentNode.appendChild(newNode);
			}
			else
			{
				var nextNode = refNode.nextSibling;
				parentNode.insertBefore(newNode,nextNode);
			}
			
		}
	}
	
	

</script>

</head>
<body>

	<p>你喜欢哪个城市?</p>
	<ul id="city">
	    <li id="bj" name="beijing">北京</li>
		<li id="nj">南京</li>                                 
		<li id="xj">西京</li>
		<li id="dj">东京</li>
	</ul>
	
	<br><br>
	<p>你喜欢哪类手机？</p>
	<ul id="game">
		<li id="apple">苹果</li>
		<li id="sum">三星</li>
		<li id="huawei">华为</li>
		<li id="xiaomi">小米</li>
	</ul>
	
	<br>
	name:<input type="text" name="username" id="name" value="atguigu">
	<br><br>
	gender:
		<input type="radio" name="gender" value="male"/>Male
		<input type="radio" name="gender" value="female"/>Female
</body>
</html>

a_worm
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
bias-by-us:我们没有偏见，这只是一个美丽的学习实验室，教授偏见在机器学习中的普遍影响
08-04
我们的偏见 概述 Bias by Us是的学习实验室之一，这是一组旨在简化学习的交互式在线网络模块。 这个特定的学习实验室专注于机器学习中的偏见：我们通过 3 个单独的案例研究，包括个性化广告中的反馈循环，向学生教授机器学习模型可能变得有偏见/歧视的不同方式。 这个项目是用 React.js 编写的。 我们还使用了 react-router，anime.js，（插入更多的库...）。 它是由 Create React App 引导的。 它与 Netlify 一起部署。 （该项目目前正在进行中。更多更新即将推出！） 开发设置 我们将使用一个非常常见的 Node.js 项目工作流程！ 首先，让我们克隆我们的存储库，并安装我们所有的节点依赖项： git clone https://github.com/uclaacm/bias-by-us.git cd bias-by-us npm i
JavaScript节点及列表操作实例小结
12-11
本文实例总结了JavaScript节点及列表操作的方法。分享给大家供大家参考。具体如下： （1）创建新节点 createDocumentFragment() //创建一个DOM片段 createElement() //创建一个具体的元素 createTextNode() //创建一个文本节点 （2）添加、移除、替换、插入 appendChild() removeChild() replaceChild() insertBefore() （3）查找 getElementsByTagName() //通过标签名称 getElementsByName() //通过元素的Name属性的值 g
js中addEventListener()与removeEventListener()用法案例分析
11-21
本文实例讲述了js中addEventListener()与removeEventListener()用法。分享给大家供大家参考，具体如下： 所有的DOM节点中都包含addEventListener()与removeEventListener()这两种方法，用于追加事件和删除追加。 接受参数：要处理的事件名、作为事件处理程序的函数和一个布尔值。 (3个) 最后这个布尔值参数是true，表示在捕获阶段调用事件处理程序；如果是false，表示在冒泡阶段调用事件处理程序。默认为false; 事件传递有两种方式：冒泡与捕获。 事件传递定义了元素事件触发的顺序。 如果你将 <p> 元素插入到 <div>
JavaScript的节点操作 —— 增加节点
Ass12454548的博客
01-23 1383
JavaScript的节点操作 —— 增加节点
插入节点
qq_45593083的博客
10-30 441
插入节点可分为在元素内插入和在元素外插入 append(content)为所有匹配的元素内部追加内容 appendTo(content)为所有匹配的元素追加（往后）到另一个元素的元素集合中 例子如下 <body> <div> </div> <script type="text/javascript"> $(documen...
添加、删除、替换以及插入节点的方法
liyongchunscr的博客
09-06 1468
添加、删除、替换以及插入节点的方法 先简单说下每个方法对应的语句和用法 obj.appendChild(node)　　把新的子节点添加到指定节点（插入新的子节点（元素）），这么说可能不是很明白，代码可能更清晰哈！node表示的就是要添加的节点。 1 // 获取元素 2 var div=document.getElementById("div1"); 3 // 创造元素，给元素添加些文字 4 var p=document.createElement("p")
单链表：创建节点与插入节点&单链表的遍历
AlexSmith17的博客
11-16 6371
上次说到，一个完整的链表是由若干个节点组成的，那么在了解链表的基础知识后就要知道如何创建节点和插入节点，以及将链表遍历输出 1.创建节点 在创建节点之前，我们已经创建好了结构体和表头 //创建结构体 struct Node { int data; struct Node* next; }; //创建表头 struct Node* createlist() { struct Node* head = (struct Node*)malloc(sizeof(struct Node)); he
插入节点的方法
weixin_30352645的博客
08-20 185
插入节点的八种方法 　　下面的例子html代码为 <body> <ul> 我是内容 </ul> </body> append()：向每个匹配的ul元素内部追加内容B　 $("ul").append("<li>第一个li</li>")结果：<ul>我是内容...
C语言结构体链表 节点插入方法（从前和从后）
m0_52870614的博客
07-31 6275
1.如果是从头节点前插入，则直接令新节点的下一个等于头节点，然后返回新节点即可。第三个参数是要插入的节点的位置，用结构体的值来表示（实际项目可自由更改）第四个参数是插入方式（前AHEAD/后BEHIND）第一步那么新节点的NEXT等于P->NEXT。第一步那么新节点的NEXT等于P->NEXT。第二步P的NEXT指向新节点。第二步P的NEXT指向新节点。第二个参数是要插入的新节点地址。第一个参数是原链表头节点地址。...
JQuery插入节点方法
kq975的博客
03-01 1821
jQuery插入节点方法，共有以下4组。 （1）prepend()和prependTo() （2）append()和appendTo() （3）before()和insertBefore() （4）after()和insertAfter() 对于这4组方法，我们可以这样划分：第1组和第2组是“内部插入节点”；第3组和第4组是“外部插入节点”。上面每一组中，任意两种方法都是等价的。因此为了减轻记忆负担，我们只需要记住以下任何一类就可以了。 （1）第1类：prepend()、append()、before()、
jQuery权威指南-源代码
11-11
3.4.1　内部插入节点方法/60 3.4.2　外部插入节点方法/64 3.5　复制节点/66 3.6　替换节点/68 3.7　包裹节点/69 3.8　遍历元素/71 3.9　删除元素/73 3.10　综合案例分析—数据删除和图片预览在项目中的应用/75 ...
Java学习笔记-个人整理的
12-19
{1.11.2.3}插入排序}{40}{subsubsection.1.11.2.3} {1.11.3}递归调用}{41}{subsection.1.11.3} {1.12}Java API}{41}{section.1.12} {1.13}Linux命令}{41}{section.1.13} {1.13.1}基本查看、移动}{41}{...
JavaScript增加节点案例
qq_36507046的博客
07-12 1669
增加节点分为两个步骤：1、创建元素节点语法：元素.creatElement('标签名')2、追加节点创建的元素节点不会显示在页面中，要想在界面看到，还得插入到某个父元素中。有两种追加给父元素的方法。（一定是追加给元素所以需要先获取父元素） 插入到父元素的最后一个子元素语法：父元素.appendChild(子元素) 插入到父元素中某个子元素的前面语法：父元素.InsertBefore(要插入的元素，在哪个元素前插入).........
数据结构--知识点16--搜索算法(二叉树)
ANingL的博客
09-06 2855
文章目录一、树的概念1、特点2、树的术语3、树的种类4、树的存储与表示5、常见的树的应用场景二、二叉树1、概念2、性质 一、树的概念 树是一种抽象数据类型(ADT)或是视作这种抽象数据类型的数据结构 1、特点 每个节点有零个或多个子节点 没有父节点的节点称为根节点 每一个非根节点有且只有一个父节点 除了根节点外，每个子节点可以分为**多个不相交(因为都只有一个父节点)**的子树 2、树的术语 节点的度：一个节点含有的子树的个数称为该节点的度 树的度：一棵树中，最大的节点的度称为树的度 叶节点或终端节点
JavaScript中DOM节点常用操作 (节点的增删追加以及节点属性操作)
whr
10-21 912
DOM节点的常用操作，动态创建节点，插入节点，删除节点，设置节点的属性，每一个都有案例
在单向链表中插入节点——C语言基础
Lanyan9的博客
07-21 5187
向单向链表插入节点 前言：链表的插入过程就是把新建的节点插入到已有的链表中，鉴于此种理解，也可以把链表的创建看做是一种特殊的插入节点过程，但是具体来说，链表的插入较于链表的创建来说稍复杂一些。 一、问题描述     编写函数，将一个节点插入到一个已有学生链表中，设已有链表按学号有小到大顺序已经排列。 二、算法描述 （1） 输入数据 （2） 生成新节点 （3） 将数据存入新节点 （4） 在链表中寻找第一个大于新节点的学号 注意：该算法的难点是第四步——在链表中寻找第一个
DOM对象——创建节点和插入节点
qq_51526974的博客
03-04 6434
创建节点和插入节点 很多时候我们想要在某个位置插入一个新的节点，此时我们首先需要有一个新的节点 创建节点 方法 描述 createElement() 创建一个新的节点，需要传入节点的标签名称，返回创建的元素对象 createTextNode() 创建一个文本节点，可以传入文本内容 innerHTML() 也能达到创建节点的效果，直接添加到指定位置 插入节点 方法 描述 write() 将任意的字符串插入到文档中 appendChild() 向元素中添加新的子节
JS-案例-增加和删除节点
worm
09-03 2210
需求：  /*  * 为 #employeetable 的所有的 a 节点添加 Onclick 响应函数:  * 1. 弹出确认对话框: 确定要删除 xx 的信息吗? xx 为当前 a 节点所在的 td 所在的 tr 的  * 第一个 td 子节点的文本值, 且要去除前后空格.  * 2. 若点击 "确认" , 则删除 a 节点的所在的 行  *  * 注意:  * 1. a 节点
el-tree最前面插入节点
最新发布
09-09
首先，你需要获取 el-tree 的根节点，然后创建一个新的节点，并将它插入到根节点的子节点列表中的第一个位置。下面是一个示例代码： ```javascript // 获取 el-tree 的根节点 const elTree = document....

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值