JavaScript 在元素前后添加元素

最新推荐文章于 2024-04-25 00:00:00 发布
最新推荐文章于 2024-04-25 00:00:00 发布
阅读量9.5k 收藏 5
点赞数 4
分类专栏： Web前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/csdnlinyongsheng/article/details/99960935
版权 
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<div class="box">
		<p>第一选项</p>
		<p>第二选项</p>
		<p>第三选项</p>
	</div>
	<script>
		var box = document.querySelector(".box");
		var p = document.createElement('p');
		p.innerHTML = "最新选项";
		box.parentNode.insertBefore(p, box);//在box之前添加元素
		// box.parentNode.insertBefore(p, box.nextSibling);//在box之后添加元素
	</script>
</body>
</html>

 

ACGuan
关注
  • 4
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jQuery与javascript对照学习 获取父子前后元素 实现代码
12-09
在这个例子中，我们通过jQuery和JavaScript分别给父元素添加了高亮类，并修改了最后一个子元素后一个兄弟元素的文本。这展示了如何在实际场景中运用这些方法。 总之，理解并熟练掌握jQuery和JavaScript中获取元素的...
JS控制伪元素的方法汇总
10-22
这是因为伪元素仅在渲染时插入到元素前后，并不影响文档结构。 2. **伪元素种类**： CSS中的伪元素包括`::after`, `::before`, `::first-line`, `::first-letter`, `::selection`, 和 `::backdrop`。其中，`::...
如何用js(jq)给html元素标签前面或者后面增加一个元素标签
橙-极纪元-cplvfx-JJY.Cheng
07-09 1万+
after()方法,before() 方法,append() 方法,prepend() 方法,appendTo() 方法,prependTo() 方法,insertAfter() 方法,insertBefore() 方法,wrap()方法,wrapAll() 方法,wrapInner() 方法 。各个方法的使用，利弊，BUG等做了深入说明
JavaScript数组前面插入元素的方法
10-24
主要介绍了JavaScript数组前面插入元素的方法,涉及javascript中unshift方法的使用技巧,非常具有实用价值,需要的朋友可以参考下
JS 添加数组元素（ 4种方法 ）
最新发布
大剑师兰特的GIS世界
04-25 6771
ush() 和 unshift() 方法会直接修改原数组。 splice() 方法同样会直接修改原数组，但它还可以用来同时删除和插入元素。 concat()方法不会改变原数组，而是返回一个新的数组。
js 在元素前后添加元素
肖明伟 的博客
08-12 4635
在元素前后添加创建的元素 话不多说，直接上代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Sanai_1992</title> <style> .item{ width: 100px; height: 100px; background-color: linen; } .item2{ widt
【JS实战】添加元素（开头添加）
Milk~每天分享一点点，技术进步一点点
08-30 974
添加元素 方法一：concat + unshift unshift() 方法可向数组的开头添加一个或更多元素，并返回新的长度 function topAdd(arr, item) { let newArr = arr.concat() newArr.unshift(item) return newArr } 方法二：slice + unshift function topAdd(arr, item) { let newArr = arr.slice(0) new
js添加元素的方式
热门推荐
weixin_68915174的博客
10-29 1万+
innerHTML可以输出标签以及内容，innerText只能输出内容不能输出标签。beforebegin：插在元素自身的前面。beforebegin：插在元素自身的前面。afterbegin：插在元素内部最前面。beforeend：插在元素内部最后面。afterbegin：插在元素内部最前面。beforeend：插在元素内部最后面。afterend：插在元素自身的后面。afterend：插在元素自身的后面。
js在一个指定元素前添加内容_前端实用技术分享—用Vue实现打印指定区域
weixin_39555320的博客
11-20 319
今天小编在代课的时候，发现很多刚刚接触前端领域的同学还不太清楚如何实现用户区域打印，网上的很多博客也只是只贴出了解决代码，但或许并不帮助大家了解其到底是什么意思。小编今天就具体的来给讲一讲如何在vue-cli的环境下实现web的打印指定区域的内容(文字或者表格图表)，让大家在学习的过程中少走一些弯路。走起，先看完成效果图：如何实现上诉需求呢，接下来咱们就一一讲解，首先咱们先把代码切分为四...
JS实现数组删除指定元素功能示例
10-16
代码最后使用`console.log`分别输出删除元素前后的数组状态，以便观察效果。 在实际应用中，这个功能可以帮助开发者更方便地处理数组，例如在动态更新数据集或者移除特定项时。了解和掌握这种操作技巧，可以提高...
动态生成页面元素的代码
10-31
这允许开发者根据用户的操作或特定条件在页面上创建新的元素，例如添加输入框、下拉选项等。以下我们将深入探讨如何使用JavaScript来实现这个功能。 首先，让我们分析给定的代码片段。这里有两个不同的示例，分别...
在JS数组特定索引处指定位置插入元素
12-11
很多与数组有关的任务听起来很简单,但实际情况并不总是如此,而开发人员在很多时候也用不到他。最近我碰到了这样一个需求: 将一个元素插入到现有数组的特定索引处。听起来很容易和常见,但需要一点时间来研究它。 // 原来的数组 var array = ["one", "two", "four"]; // splice(position, numberOfItemsToRemove, item) // 拼接函数(索引位置, 要删除元素的数量, 元素) array.splice(2, 0, "three"); array; // 现在数组是这个样子 ["one", "two", "three", "f
js有关元素内容操作小结
10-28
在JavaScript中，元素内容的操作是DOM操作的重要组成部分。本文主要总结了6个关键知识点，涉及JavaScript对HTML元素内容的读写、替换、高效插入、灵活添加以及文本内容的处理。 1. `.innerHTML`：`.innerHTML`属性...
原生JS如何在在指定位置插入元素，前面、后面
u010362468的博客
11-05 5497
element.insertAdjacentHTML(position, text); position 是相对于 element 元素的位置，并且只能是以下的字符串之一： beforebegin：在 element 元素的前面。 afterbegin：在 element 元素的第一个子节点前面。 beforeend：在 element 元素的最后一个子节点后面。 afterend：在 element 元素的后面。 text 是字符串，会被解析成 HTML 或 XML，并插入到 DOM 树中。 // one
js给指定元素插入元素insertAdjacentHTML
qq_42002487的博客
03-15 493
前言 insertAdjacentHTML() 方法将指定的文本解析为 Element 元素，并将结果节点插入到DOM树中的指定位置。它不会重新解析它正在使用的元素，因此它不会破坏元素内的现有元素。这避免了额外的序列化步骤，使其比直接使用innerHTML操作更快。 'beforebegin'：元素自身的前面。 'afterbegin'：插入元素内部的第一个子节点之前。 'beforeend'：...
【js/jQuery】在元素最前或最后添加一个新元素的方法
superioc的博客
09-18 859
在元素内部添加元素的方法
js中几种追加元素的方法
MImi_0612的博客
06-17 7775
a：要追加的位置 b：要追加的内容 1、append：a.append(b) 将b追加到a的内部的末尾，b是a的子元素 2、appendTo：b.appendTo(a) 将b追加到a的内部的末尾，b是a的子元素 3、prepend：a.prepend(b),将b追加到a的内部的最前面，b是a的子元素 4、prependTo：b.prependTo(a),将b追加到a的内部的最前面，b是a的子元素 5、after：a.after(b),将元素(b)追加到(a)后面，二者同级 6、before：a
JavaScript数组函数unshift、shift、pop、push使用实例
曹浩洋的专栏
02-28 2072
一、unshift 在数组第一个元素前插入元素 // 使用unshift在数组第一个元素前插入元素 // 返回数组长度 var tmp = ['a','b']; var len = tmp.unshift('c'); alert(len); // 3 alert(tmp); // c,a,b 也可以一次插入多个元素，顺序依次从左边排起 // 使用unshift在数组第一个元
javascript常用的数组方法
qq_33418013的博客
11-01 4983
前端 javascript 数组的常用的方法
定义一个字符串数组： strArr = [' H5','JavaScript ',' JS ','HTML','JS JQuery']。 要求： （1）删除该数组中每个字符串的前后空格字符，并将删除空格后的字符串数组在控制台输出。 （2）删除数组的第3个元素，并在控制台输出结果; （3）在数组的第二个位置处添加元素“Java”，并在控制台输出; （4）将数组中的所有元素用 ‘_’ 连接，并在控制台输出结果; （5）在数组的最后添加元素“Eclipse”; （6）将数组的第4个元素值替换为“Hello”;
03-26
var strArr = [' H5','JavaScript ',' JS ','HTML','JS JQuery']; // (1) 删除前后空格 for(var i=0;i<strArr.length;i++){ strArr[i] = strArr[i].trim(); } console.log(strArr); // (2) 删除第3个元素 strArr.splice(2,1); console.log(strArr); // (3) 在第二个位置添加元素 strArr.splice(1,0,'Java'); console.log(strArr); // (4) 将所有元素用 '_' 连接 var result = strArr.join('_'); console.log(result); // (5) 在数组末尾添加元素 strArr.push('Eclipse'); console.log(strArr); // (6) 将第4个元素替换为 'Hello' strArr[3] = 'Hello'; console.log(strArr);
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值