浅析insertAdjacentHTML()、insertAdjacentElement()和insertAdjacentText()的用法和区别

已于 2022-04-09 22:11:09 修改
阅读量1.3k 收藏 7
点赞数 1
分类专栏： js 文章标签： javascript
于 2022-04-09 22:10:45 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Devil_ErKang/article/details/124067217
版权

目录

用法

区别

用法

他们三儿的用法都差不多，都是插入一些东西进去，只不过插的东西不一样罢了。

element.insertAdjacentElement(position, element)
// element被插的元素
// position要插入的位置
// 要插入的元素

这三个方法都是有两个参数，第一个参数是要插入的位置，第二个参数是要插入的东西

第一个参数一共有四个值

  • 'beforebegin': 在该元素本身的前面.
  • 'afterbegin':只在该元素当中, 在该元素第一个子孩子前面.
  • 'beforeend':只在该元素当中, 在该元素最后一个子孩子后面.
  • 'afterend': 在该元素本身的后面.

接下来我们演示一下

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge"
最低0.47元/天 解锁文章
Mr.ERDUO
关注
  • 1
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
innertext , insertadjacentelement , insertadjacenthtml , insertadjacenttext 等区别
10-30
本文将深入探讨`innerText`、`insertAdjacentElement`、`insertAdjacentHTML`、`insertAdjacentText`等几个JavaScript DOM操作方法的区别与应用。由于这些方法并非所有浏览器都支持，因此文中还提供了针对不同浏览器...
insertAdjacentElement(sWhere, oElement)概要用法
08-30 883
在一个临近的指定的位置插入一个元素. 语法： oElement = object.insertAdjacentElement(sWhere, oElement)  参数： oElement     :　必选项。对象(Element)。要插入到 object 邻近的对象
JS学习37：insertAdjacentHTML/insertAdjacentElement/insertAdjacentText
wonder
11-14 1032
1、插入Element 在js中，最常用的插入Element方法有appendChild和insertBefore，用法为： // appendChild// parentElement.appendChild(childElement);var oBody = document.querySelector("body");var oA = document.createElement("
insertAdjacentHTML/insertAdjacentElement/insertAdjacentText
CommonBorage
06-18 616
1、插入Element 在js中，最常用的插入Element方法有appendChild和insertBefore，用法为： // appendChild// parentElement.appendChild(childElement);var oBody = document.querySelector("body");var oA = document.createElement("
insertAdjacentHTML( )，insertAdjacentElement( ) , insertAdjacentText( ) 方法
个人前端记录
06-19 1151
insertAdjacentHTML（）是一个插入标记的方法，这个方法最早在IE中出现，现在绝大多数浏览器都支持这个方法。 insertAdjacentHTML（）接受2个参数：要插入的位置和要插入的HTML文本，第一个参数必须是下面4个值之一，第二个参数是一个HTML字符串： beforebegin，在当前元素之前插入一个紧邻的同辈元素； afterbegin，在当前元素之下插入一个新的子...
javaScript的insertAdjacentHTML()和insertAdjacentText()详解
sanshuiwang
08-11 1510
1、insertAdjacentHTML方法可以在指定的地方插入html内容和文本内容。性能上：insertAdjacentHTML 比 element.innerHTML的性能更好，比Document Fragments更好的HTML文档插入方案，因为我们知道Document Fragments在某些IE版本中的表现不好。 2、insertAdjacentText方法与 insertAdjac
JS整理 insertAdjacentElement、insertAdjacentHTML、insertAdjacentText
Rand Tsui
07-29 3092
document.addEventListener("DOMContentLoaded", function () { var div = document.getElementById("d"); var bt = document.getElementById("bt"); bt.onclick = function (e) { //div.insert
insertAdjacentHTML和insertAdjacentText方法(转)
aoluan2964的博客
11-10 106
IE的DHTML对象提供了四个可读写的属性来动态操作页面元素的内容:innerText, outerText, innerHTML, outerHTML. 　　需注意两点: 　　1. 其中innerText,outerText属性的值是作为普通文本呈现的，即使它含有HTML标签也如实反应出来;而innerHTML, outerHTML呈现的是经HTML引擎解析后文本，它可以反应属性...
添加html内容,添加html内容(insertAdjacentHTML和insertAdjacentText)
weixin_35949435的博客
06-07 230
添加html内容(insertAdjacentHTML和insertAdjacentText)dhtml提供了两个方法来进行添加，insertAdjacentHTML和insertAdjacentTextinsertAdjacentHTML方法：在指定的地方插入html标签语句。原型：insertAdjacentHTML(swhere,stext)参数：swhere:指定插入html标签语句的地方...
insertAdjacentHTML和insertAdjacentText的使用（在指定位置插入代码或者文字）
dimiaofan3981的博客
05-06 209
insertAdjacentText方法与insertAdjacentHTML方法类似，只不过只能插入纯文本，参数相同。 转载于:https://www.cnblogs.com/mm20/p/10821838.html
总结AJAX相关JS代码片段和浏览器模型
10-30
**技巧**：使用 `insertRow` 和 `insertCell` 方法可以方便地添加新的行和单元格。 ```javascript function addTableRow(tableId) { var table = document.getElementById(tableId); var newRow = table....
js实现上传文件添加和删除文件选择框
10-21
首先，我们需要了解两个关键的DOM操作函数：`insertAdjacentHTML` 和 `removeChild`。`insertAdjacentHTML` 用于在指定位置插入HTML字符串，而 `removeChild` 用于删除指定的子节点。 在删除文件选择框的 `remove...
Js弹出div和关闭
11-09
接下来构建一个包含样式信息的`div`字符串，最后使用`insertAdjacentHTML`方法将这个`div`插入到文档的`body`开始位置。 #### 关闭div的实现 为了使弹出的`div`可以被关闭，我们需要定义一个函数来改变该`div`的...
ASP.NET上传和下载文件的代码
12-16
### ASP.NET上传和下载文件的代码详解 在Web开发中，文件的上传和下载是常见的需求之一，尤其在企业级应用、文档管理平台等场景下更为常见。ASP.NET作为微软推出的一款服务器端脚本环境，提供了强大的功能来处理这...
如何在指定的地方插入html内容和文本内容
12-01
举个例子，假设我们有一个`<div id="ScriptDiv"></div>`，我们可以使用`insertAdjacentHTML`方法向其内部添加按钮和脚本： ```javascript var sHTML = '() value=’Click Me’><BR>'; var sScript = '...
insertAdjacentHTML动态插入行[归类].pdf
10-11
此外，还有一个与`insertAdjacentHTML`相似但只能插入纯文本的方法`insertAdjacentText`，它的用法与`insertAdjacentHTML`类似，只是插入的内容不会被解析为HTML。 最后，一个简单的动态添加和删除元素的例子： ``...
在table中插入多行，能使用与insertAdjacentHTML相似的功能吗？
12-11
下面的例子实现了这个功能，同样地，该例支持IE和firefox。该功能的实现意义重大，这样页面元素的处理，就全部都能够用拼html字串的方法来实现了。 1 插入行 [Ctrl+A 全选 注:如需引入外部Js需刷新才能...
dom-insert-html:使用“insertAdjacentHTML”的 HTML 字符串 DOM 插入方法
07-04
使用方便的、对压缩器友好的方法。 安装 npm install dom-insert-html 应用程序接口 可用方法： after(element, string) : 在元素之后插入 HTML 字符串。 before(element, string) : 在元素之前插入 HTML 字符串...
insertadjacenthtml
最新发布
03-17
insertAdjacentHTML 是 JavaScript 中的一个方法，用于在 HTML 元素的指定位置插入 HTML 字符串。它接受两个参数：第一个参数是插入的位置（'beforebegin'、'afterbegin'、'beforeend'、'afterend'），第二个参数是要插入的 HTML 字符串。 使用示例： ``` <div id="example"> <p>这是一个段落。</p> </div> <script> var example = document.getElementById("example"); example.insertAdjacentHTML('afterbegin', '<p>这是新插入的段落。</p>'); </script> ``` 在这个例子中，我们使用 insertAdjacentHTML 在 example div 的开头插入了一个新的段落。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值