insertAdjacentElement() 移动元素到指定位置/insertAdjacentText()把文本添加到指定位置/inserAdjacentHTML() 把html文本添加到指定位置

最新推荐文章于 2022-10-29 23:41:22 发布
最新推荐文章于 2022-10-29 23:41:22 发布
阅读量715 收藏 2
点赞数 1
分类专栏： JavaScript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42448623/article/details/106855039
版权

insertAdjacentElement()

MDN文档

MDN文档

insertAdjacentElement()

移动元素到指定位置

ele.insertAdjacentElement(position,element) // element移动的元素

position

beforebegin //在本身之前插入
afterbegin //在第一个子节点直接插入
beforeend //在最后一个子节点直接插入
afterend //在本身之后插入

示例

在这里插入图片描述
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title></title>
    
</head>
<body>
    <div class="ul">
        <div class="lis">ul第1个子元素</div>
        <div class="lis">ul第2个子元素</div>
        <div class="lis">ul第3个子元素</div>
    </div>
    <div class="btns">
        <button data-type="beforebegin">移动到入到ul前面</button>
        <button data-type="afterbegin">移动到到ul第一个子节点前面</button>
        <button data-type="beforeend">移动到到ul最后一个子节点后面</button>
        <button data-type="afterend">移动到到ul后面</button>
    </div>
    <script>
        let ul = document.querySelector(".ul")
        let btns = document.querySelector(".btns")
        btns.addEventListener('click',function(e){
            let target = e.target
            var type = target.dataset.type
            if(type){
                ul.insertAdjacentElement(type,target)
            }
        })
    </script>
</body>
</html>

insertAdjacentText()

MDN文档

MDN文档

insertAdjacentText()

使用方法insertAdjacentElement 一致
把文本添加到指定位置

ele.insertAdjacentElement(position,"插入的文本") // element移动的元素

inserAdjacentHTML()

inserAdjacentHTML()

tianmeng1999
关注
专栏目录
innertext , insertadjacentelement , insertadjacenthtml , insertadjacenttext 等区别
10-30
`insertAdjacentElement`允许开发者在指定的位置插入一个已解析的DOM节点。这个方法同样不是所有浏览器都支持，尤其是在较老版本的浏览器中。该方法接受两个参数：位置和要插入的节点。 #### 参数解释 - **where**:...
浅析insertAdjacentHTML()、insertAdjacentElement()和insertAdjacentText()的用法和区别
Devil_ErKang的博客
04-09 1511
用法 他们三儿的用法都差不多，都是插入一些东西进去，只不过插的东西不一样罢了。 element.insertAdjacentElement(position, element) // element被插的元素 // position要插入的位置 // 要插入的元素 这三个方法都是有两个参数，第一个参数是要插入的位置，第二个参数是要插入的东西 第一个参数一共有四个值 'beforebegin': 在该元素本身的前面. 'afterbegin':只在该元素当中, 在该元素第一个子孩子前面. 'b
insertAdjacentElement方法介绍
justforuse的博客
11-04 1763
参考链接：https://justforuse.github.io/blog/zh-cn/2019/11/insertadjacentelement-tutorial/
insertAdjacentHTML/insertAdjacentElement/insertAdjacentText
CommonBorage
06-18 648
1、插入Element 在js中，最常用的插入Element方法有appendChild和insertBefore，用法为： // appendChild// parentElement.appendChild(childElement);var oBody = document.querySelector("body");var oA = document.createElement("
insertAdajcentHTML
阳光岛主
08-20 4214
<br />添加HTML内容与文本内容以前用的是innerHTML与innerText方法，最近发现还有insertAdjacentHTML和insertAdjacentText方法，这两个方法更灵活，可以在指定的地方插入html内容和文本内容。<br />insertAdjacentHTML方法：在指定的地方插入html标签语句 <br />原型：insertAdajcentHTML(swhere,stext)<br />参数：<br />swhere: 指定插入html标签语句的地方，有四种值可用：<b
insertAdjacentElement(sWhere, oElement)概要用法
08-30 919
在一个临近的指定的位置插入一个元素. 语法： oElement = object.insertAdjacentElement(sWhere, oElement)  参数： oElement     :　必选项。对象(Element)。要插入到 object 邻近的对象
交换两个div的位置
04-24
- **`insertAdjacentElement()` 方法**：这是一个非标准的方法，用于在指定位置插入一个元素节点。语法如下： ```javascript element.insertAdjacentElement(position, node); ``` - `position` 参数可以是 `...
在Z-Blog中运行代码[html][/html]（纯JS版）
10-30
win.document.open('text/html', 'replace'); // 替换空格和制表符 win.document.writeln(this.parentNode.previousSibling.value.replace(/\u00a0/gi, "")); win.document.close(); }; em.innerHTML = "...
统一接口：为FireFox添加IE的方法和属性的js代码
10-30
标题中的"统一接口：为FireFox添加IE的方法和属性的js代码"指的是通过JavaScript来实现浏览器兼容性，使得Firefox能够支持一些原本只在Internet Explorer（IE）中可用的方法和属性。这种做法通常是为了提高跨浏览器...
插入DOM神器 - insertAdjacent*
无声告白
04-08 548
DOM操作中，插入元素的操作是使用较多的，一半我们都会使用appendChild来做，但是使用起来很不方便，特别是涉及到表格操作： const emptyRow = document.querySelector('tr'); const firstCol = document.createElement('td'); firstCol.className = 'first-col'; first...
insertAdjacentElement of JavaScript
weixin_34101229的博客
03-24 75
为什么80%的码农都做不了架构师？>>> ...
insertAdjacentElement方法
青潭狼的专栏
11-30 732
导读： 　　语法： 　　oElement = object . insertAdjacentElement ( sWhere , oElement ) 　　参数： 　　oElement :　 必选项。对象(Element)。要插入到 object 邻近的对象。 　　sWhere :　 必选项。字符串(String)。beforeBegin | afterBegin | beforeEnd
javaScript的insertAdjacentHTML()和insertAdjacentText()详解
sanshuiwang
08-11 1540
1、insertAdjacentHTML方法可以在指定的地方插入html内容和文本内容。性能上：insertAdjacentHTML 比 element.innerHTML的性能更好，比Document Fragments更好的HTML文档插入方案，因为我们知道Document Fragments在某些IE版本中的表现不好。 2、insertAdjacentText方法与 insertAdjac
insertAdjacentElement》在dom中插入的位置
stanleyhsl的博客
03-03 258
var div = document.getElementById("d"); var bt = document.getElementById("bt"); bt.onclick = function (e) { //div.insertAdjacentElement("beforeBegin", document.createElement("p")); //d...
JS整理 insertAdjacentElement、insertAdjacentHTML、insertAdjacentText
Rand Tsui
07-29 3130
document.addEventListener("DOMContentLoaded", function () { var div = document.getElementById("d"); var bt = document.getElementById("bt"); bt.onclick = function (e) { //div.insert
js添加元素的方式
热门推荐
weixin_68915174的博客
10-29 1万+
innerHTML可以输出标签以及内容，innerText只能输出内容不能输出标签。beforebegin：插在元素自身的前面。beforebegin：插在元素自身的前面。afterbegin：插在元素内部最前面。beforeend：插在元素内部最后面。afterbegin：插在元素内部最前面。beforeend：插在元素内部最后面。afterend：插在元素自身的后面。afterend：插在元素自身的后面。
有关javascript:insertAdjacentHTML和javascript:insertAdjacentElement的用法
helanye的专栏
08-29 5937
 添加HTML内容与文本内容以前用的是innerHTML与innerText方法，最近发现还有insertAdjacentHTML和insertAdjacentText方法，这两个方法更灵活，可以在指定的地方插入html内容和文本内容。 insertAdjace添加HTML内容与文本内容以前用的是innerHTML与innerText方法，最近发现还有insertAdjacentHTM
js使用insertAdjacentElement往目标节点第一个位置插入dom
最新发布
05-28
可以使用以下代码将DOM元素插入到目标节点的第一个位置： ```javascript // 获取目标节点 const targetNode = document.getElementById('target'); // 创建新的DOM元素 const newElement = document.createElement('div'); newElement.textContent = '这是新的DOM元素'; // 将新的DOM元素插入到目标节点的第一个位置 targetNode.insertAdjacentElement('afterbegin', newElement); ``` 在上面的代码中，`insertAdjacentElement`方法的第一个参数是用于指定插入位置的位置字符串，可以是以下四个值之一： - `beforebegin`：在目标节点之前插入DOM元素 - `afterbegin`：在目标节点内部的第一个子节点之前插入DOM元素 - `beforeend`：在目标节点内部的最后一个子节点之后插入DOM元素 - `afterend`：在目标节点之后插入DOM元素 第二个参数是要插入的DOM元素。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值