js 在元素前后添加元素

最新推荐文章于 2023-09-18 00:00:26 发布
最新推荐文章于 2023-09-18 00:00:26 发布
阅读量4.6k 收藏
点赞数
分类专栏： js HTML JavaScript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sanai_1992/article/details/119646125
版权
JavaScript 同时被 3 个专栏收录
22 篇文章 1 订阅
订阅专栏
HTML
7 篇文章 0 订阅
订阅专栏
js
3 篇文章 0 订阅
订阅专栏

在元素前后添加创建的元素


话不多说，直接上代码 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Sanai_1992</title>
  <style>
    .item{ width: 100px; height: 100px; background-color: linen; }
    .item2{ width: 200px; height: 100px; background-color: lightblue; }
  </style>
</head>
<body>
  <div id="container" class="container">
    <div class="item" id="item"></div>
  </div>
</body>
<script>
  /**
  * name: addDomTopOrBottom => 在元素前后添加元素
  * params => ele:参照元素
  * params => newDom:需要插入的元素
  * params => position = 'bottom' ： 插入位置 top:ele元素前  bottom：ele元素后（默认）
  * */
  function addDomTopOrBottom(ele, newDom, position = 'bottom') {
    let parent = ele.parentNode;
    if(position === 'top') {
      parent.insertBefore(newDom, ele)
    }else if(position === 'bottom'){
      if (parent.lastChild === ele) {
        parent.appendChild(newDom);
      } else {
        parent.insertBefore(newDom, ele.nextSibling)
      }
    }
  }

  let dom = document.createElement("div");
  dom.className = 'item2';
  let dom1 = document.createElement("div");
  dom1.className = 'item2';
  addDomTopOrBottom(document.getElementById("item"),dom,'top')
  addDomTopOrBottom(document.getElementById("item"),dom1)
</script>
</html>

运行结果：
运行结果，在item前后均添加了item2

蕭朙偉
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
添加元素/在指定元素前添加元素
weixin_44552543的博客
05-01 1684
效果图 单机按钮后 将广州元素插入到北京元素前面 <script> //添加在指定元素前面添加元素 myClick("btn1",function () { //创建子节点 var li=document.createElement("li"); //创建文本文件 var gzText=documen...
JavaScript数组前面插入元素的方法
10-24
主要介绍了JavaScript数组前面插入元素的方法,涉及javascript中unshift方法的使用技巧,非常具有实用价值,需要的朋友可以参考下
JavaScript 在元素前后添加元素
KevinMiGuan的博客
08-21 9524
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <div class="box"> <p>第一选项</p&...
js 如何在一个元素节点之后插入元素
xiaoweids的博客
09-05 8452
它的解释器被称为Javascript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在htmL（标准通用标记语言下的一个应用）网页上使用，用来给htmL网页增加动态功能。//新建的元素节点插入id为P1节点元素的后面。为了取得技术优势，微软推出了Jscript，cenvi推出scriptease，与Javascript同样可在浏览器上运行。Javascript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。如果不是，则插入在目标元素的下一个兄弟节点的前面；...
【JS实战】添加元素（开头添加）
Milk~每天分享一点点，技术进步一点点
08-30 943
添加元素 方法一：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
jQuery使用before()和after()在元素前后添加内容的方法
10-24
主要介绍了jQuery使用before()和after()在元素前后添加内容的方法,实例分析了jQuery中before()和after()方法添加内容的技巧,非常具有实用价值,需要的朋友可以参考下
JS实现数组删除指定元素功能示例
10-16
代码最后使用`console.log`分别输出删除元素前后的数组状态，以便观察效果。 在实际应用中，这个功能可以帮助开发者更方便地处理数组，例如在动态更新数据集或者移除特定项时。了解和掌握这种操作技巧，可以提高...
JS控制伪元素的方法汇总
10-22
这是因为伪元素仅在渲染时插入到元素前后，并不影响文档结构。 2. **伪元素种类**： CSS中的伪元素包括`::after`, `::before`, `::first-line`, `::first-letter`, `::selection`, 和 `::backdrop`。其中，`::...
js有关元素内容操作小结
10-28
在JavaScript中，元素内容的操作是DOM操作的重要组成部分。本文主要总结了6个关键知识点，涉及JavaScript对HTML元素内容的读写、替换、高效插入、灵活添加以及文本内容的处理。 1. `.innerHTML`：`.innerHTML`属性...
动态生成页面元素的代码
10-31
这允许开发者根据用户的操作或特定条件在页面上创建新的元素，例如添加输入框、下拉选项等。以下我们将深入探讨如何使用JavaScript来实现这个功能。 首先，让我们分析给定的代码片段。这里有两个不同的示例，分别...
原生js实现给指定元素的后面追加内容
12-10
代码如下: var header1 = document.getElementById(“header”); var p = document.createElement(“p”); // 创建一个元素节点 insertAfter(p,header1); // 因为js没有直接追加到指定元素后面的方法 所以要自己创建一个方法 function insertAfter( newElement, targetElement ){ // newElement是要追加的元素 targetElement 是指定元素的位置 var parent = targetElement[removed]; //
在JS数组特定索引处指定位置插入元素
12-11
很多与数组有关的任务听起来很简单,但实际情况并不总是如此,而开发人员在很多时候也用不到他。最近我碰到了这样一个需求: 将一个元素插入到现有数组的特定索引处。听起来很容易和常见,但需要一点时间来研究它。 // 原来的数组 var array = ["one", "two", "four"]; // splice(position, numberOfItemsToRemove, item) // 拼接函数(索引位置, 要删除元素的数量, 元素) array.splice(2, 0, "three"); array; // 现在数组是这个样子 ["one", "two", "three", "f
js在一个指定元素前添加内容_不得不佩服，美观小巧的网页内容编辑器——ContentTools...
weixin_39882623的博客
11-02 401
介绍ContentTools是一个美观小巧的网页内容工具(一个JS库)，具备所见即所得(WYSIWYG)的编辑器功能，只需几个简单的步骤，即可将ContentTools添加到任何HTML页面。如下图所示页面通过实时ContentTool的弹出层实现实时编辑功能。用小而美来形容它最好不过了！Github地址https://github.com/GetmeUK特性ContentTools是用于HTML...
js在一个指定元素前添加内容_Day036-JS
weixin_39859394的博客
11-21 1518
第71次(JavaScript)学习主题：JavaScript学习目标：1 掌握bom中的常用对象2 掌握dom如何获取节点,以及dom节点的类型1. BOM和DOM入门(1) 请说出DOM对象和BOM对象的关系BOM对象包含DOM对象，DOM对象是BOM的子对象。(2) 请说出BOM对象中包含的对象内容window、document、location、navigation、screen、hist...
js添加元素的方式
热门推荐
weixin_68915174的博客
10-29 1万+
innerHTML可以输出标签以及内容，innerText只能输出内容不能输出标签。beforebegin：插在元素自身的前面。beforebegin：插在元素自身的前面。afterbegin：插在元素内部最前面。beforeend：插在元素内部最后面。afterbegin：插在元素内部最前面。beforeend：插在元素内部最后面。afterend：插在元素自身的后面。afterend：插在元素自身的后面。
【js/jQuery】在元素最前或最后添加一个新元素的方法
最新发布
superioc的博客
09-18 839
在元素内部添加元素的方法
JS 追加元素的方法总结
m0_67859656的博客
11-23 2807
JS 追加元素方法总结
如何用js(jq)给html元素标签前面或者后面增加一个元素标签
橙-极纪元-cplvfx-JJY.Cheng
07-09 1万+
after()方法,before() 方法,append() 方法,prepend() 方法,appendTo() 方法,prependTo() 方法,insertAfter() 方法,insertBefore() 方法,wrap()方法,wrapAll() 方法,wrapInner() 方法 。各个方法的使用，利弊，BUG等做了深入说明
定义一个字符串数组： 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、付费专栏及课程。

余额充值