JS中利用dom实现追加与插入

最新推荐文章于 2022-08-02 10:33:57 发布
最新推荐文章于 2022-08-02 10:33:57 发布
阅读量560 收藏
点赞数 1
分类专栏： Web前端 文章标签： javascript ViewUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/JAVAZHICHIZHE/article/details/83678169
版权
都是圈内人士了，咱就直接进入主题吧.... ^_^ ^_^

Node对象有insertBefore(newChild, 被引用Child)和appendChild(newChild)两个方法用来插入结点。

appendChild(newChild)方法作为某结点的方法来调用，在该结点的子结点列表的结尾添加一个newChild.

insertBefore(newChild, 被引用的0Child)制定在 被引用Child之间插入一个newChild. 在实际应用中，需要访问某个结点的双亲结点，已获得insertBefore()方法必要的信息。


<html>

<head>

<title>结点插入与追加</title>
<script type="text/javascript">
<!--
function makeNode(str) //创建结点函数
{
var newParagraph = document.createElement("p"); //创建新元素p
var newText = document.createTextNode(str); //创建新文本
newParagraph.appendChild(newText); //追加一个新的子结点
return newParagraph; //返回该段落
}

function appendBefore(nodeId, str) //前插入函数
{
var node = document.getElementById(nodeId);
var newNode = makeNode(str);
if(node.parentNode) //如果存在双亲结点
{
node.parentNode.insertBefore(newNode, node); //在当前节结点前插入新结点
}
}

function insertWithin(nodeId, str) //中插入函数
{
var node = document.getElementById(nodeId);
var newNode = makeNode(str);
node.appendChild(newNode); //追加一个新的结点
}

function appendAfter(nodeId, str) //后插入函数
{
var node = document.getElementById(nodeId);
var newNode = makeNode(str);
if(node.parentNode) //如果存在双亲结点
{
if(node.nextSibling) //如果存在下一子结点
{
//前插入子结点
node.parentNode.insertBefore(newNode, node.nextSibling);
}else //如果没有下一子结点
//后追加子结点
node.parentNode.appendChild(newNode);
}
}
//-->
</script>

</head>

<body>
<h1><center> DOM插入与追加</center></h1>
<hr>
<div style="background-clolor: #66ff00;">
<div id="innerDiv" style="background-color:#ffcc00;"></div>
</div>
<hr>

<form id="form1" name="form1" action="#" method="get">
<input type="text" id="field1" name="field1">
<input type="button" value="前插入" οnclick="appendBefore('innerDiv', document.form1.field1.value);">
<input type="button" value="中插入" οnclick="insertWithin('innerDiv', document.form1.field1.value);">
<input type="button" value="后插入" οnclick="appendAfter('innerDiv', document.form1.field1.value);">
</form>

</body>

</html>
JAVAZHICHIZHE
关注
专栏目录
【JS笔记】JS中的DOM对象以及通过JS获取DOM结点，操作DOM属性、DOM增删改查
✅ Java 开发工程师，从事 Web 应用程序的研发，擅长 Spring、SpringBoot 等技术。 ✅ 热爱编程，业余时间学习新知识，通过 CSDN 记录学习心得和笔记内容。
11-09 1913
DOM，全称是：Document Object Model，文档对象模型，它主要是用于描述HTML文档对象的。一个HTML页面是由许多的标签组成的，例如：html、head、body、div等等标签元素，JS里面将整个的HTML作为一个document文档来进行管理，其中HTML里面的每一个标签都是一个DOM结点。HTML里面所有的DOM结点构成了一颗DOM树，这就有点类似于二叉树了，只不过DOM里面的树是多叉树，因为HTML里面的标签里面可以嵌套许多其他的标签。...
JS获取动态添加元素的方法详解
10-16
主要介绍了JS获取动态添加元素的方法,结合实例形式分析了js动态添加DOM元素及获取已添加的DOM元素相关操作技巧,需要的朋友可以参考下
DOM插入节点
iteye_5722的博客
03-04 253
一 介绍 插入节点通过使用insertBefore()方法来实现。 insertBefore()方法将在另一个子节点前插入新的子节点。 obj.insertBefore(new,ref) new：表示新的子节点。 ref：指定一个节点，在这个节点前插入新的节点。   二 应用 插入节点，本示例在页面的文本框中输入需要插入的文本，然后通过单击“前插入”按钮将文本插入到页面中。 ...
每日一条js之DOM操作（获取、创建、插入、删除）
qq_40816649的博客
09-21 471
原生的js不像vue这类数据绑定的框架，原生js涉及到很多dom相关的操作，显得比较繁琐，但是想到前端流行的框架都是基于原生js写的还是去学习了下。 在对dom进行操作之前都要先获取到dom元素： 获取dom元素的方法可以通过id、class、或者元素标签名等如： var oRoot = document.getElementById('root');     1.获取子级 oRoot...
使用dom操作，动态添加节点
qq_38963393的博客
04-07 293
使用dom操作，动态添加节点。 值得注意的是，节点的style需要重新写在css文件中，使用父类的bootstrap类会出错。 另发现 **commands = request.POST.getlist(‘command’)**这个函数可以获取相同name的多个标签的值。 // creating checkbox element let input...
JavaScript实现js添加dom元素（以下拉框为例子）
南 墙
06-03 2755
效果图： 也可以根据自己的需要更改下拉框的值 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <input type="button" id="" value="添加" onclick="add()" /> <div id="sel">
利用jquery如何从json中读取数据追加到html中
11-26
在Web开发中，jQuery是一个非常流行的JavaScript库，它简化了DOM操作、事件处理以及Ajax交互。本篇文章将详细讲解如何利用jQuery从JSON数据中提取信息并将其动态地追加到HTML页面上。 首先，JSON（JavaScript ...
JS添加或删除HTML dom元素的方法实例分析
10-17
JavaScript提供了多种方式来添加和删除DOM元素，这些操作对于实现如用户交互、动态内容加载等功能至关重要。接下来，我们将详细探讨JavaScript添加和删除HTML DOM元素的方法，并结合实例进行分析。 ### 创建DOM元素...
JQuery插入DOM节点的方法
10-24
JQuery作为一种广泛使用的JavaScript库，提供了大量用于DOM操作的工具函数，其中插入DOM节点的方法尤其重要，因为它让动态地向页面中添加内容变得更加简单和直观。在JQuery中，有多种方法可以实现DOM节点的插入，每...
JS实现动态添加DOM节点和事件的方法示例
10-19
主要介绍了JS实现动态添加DOM节点和事件的方法,涉及javascript事件响应及针对页面dom元素节点与属性的动态操作相关实现技巧,需要的朋友可以参考下
js和jquery对dom节点的操作(创建/追加)
10-27
本文详细介绍下js和jquery对dom节点的操作包括创建、追加等等，感兴趣的朋友可以参考下哈，希望对你有所帮助
js动态创建div等元素实例
03-19
js动态创建div等元素实例.动态创建div，子元素，select下拉框，单选按钮。等待
在可编辑div中插入文字或图片解决思路与实现步骤
09-25
在可编辑div中插入文字或者图片,因为web在线编辑器我从来只是用，基本不会去研究源代码,需要的朋友可以参考下
JavaScript 之 Dom元素末尾深度克隆另一Dom元素
weixin_44996006的博客
07-07 327
JavaScript 之 Dom元素末尾深度克隆另一Dom元素
js html 追加元素,JavaScript HTML DOM 元素（节点）
weixin_35600835的博客
05-30 215
删除已有 HTML 元素如需删除某个 HTML 元素，您需要知晓该元素的父：实例这是一个段落。这是另一个段落。var parent = document.getElementById("div1");var child = document.getElementById("p1");parent.removeChild(child);方法 node.remove() 是在 DOM 4 规范中实现的...
js dom追加html,纯JS为DOM添加html字符串：appendHTML方法和prependHTML方法
weixin_31111259的博客
05-31 899
/***纯JS为DOM添加html字符串：appendHTML方法和prependHTML方法* * http://www.myexception.cn/HTML-CSS/1876216.html** http://www.zhangxinxu.com/wordpress/2013/05/js-dom-basic-useful-method/* @param {Object} html*/HTML...
JavaScript之DOM增删替换复制元素
weixin_44827643的博客
06-21 1579
本文主要介绍如何利用DOM实现页面元素的添加、删除以及替换。1.添加元素核心思路：先通过createElement()创建元素并通过createTextNode()添加其文本，后利用父级并通过appendChild()或insertBefore()方法插入创建的元素。appendChild()会在父级最后的位置插入元素，insertBefore()则可以指定父级内的某个子元素，然后插入到该元素的前面。2.删除元素核心思路：remove()方法：获取到元素之后直接调用即可，有些浏览器不支持。removeChi
js的DOM操作
吃瓜群众
08-02 1020
javascript中的DOM讲解
jQuery操作DOM：元素的追加与删除技巧
在jQuery中，元素的追加和删除是常见的DOM操作，它们极大地简化了JavaScript中的DOM操作过程。DOM（Document Object Model）是用于表示HTML或XML文档的一种结构化表示，分为DOM Core、HTML-DOM和CSS-DOM三个部分。 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值