首页 > 原生JS修改html内容不影响绑定的点击事件 请认准insertAdjacentHTML、insertAdjacentText方法

原生JS修改html内容不影响绑定的点击事件 请认准insertAdjacentHTML、insertAdjacentText方法

insertAdjacentText方法与 insertAdjacentHTML方法类似，只不过是插入纯文本，参数相同

参数说明：

elementDOM.insertAdjacentHTML(where,html)

elementDOM：用于参照插入位置的html元素对象

where：插入位置。包括"beforeBegin"、"beforeEnd”、“afterBegin”、”afterEnd"：

  • beforeBegin 插入到标签开始之前
  • afterBegin 插入到标签开始之后
  • beforeEnd 插入到标签结束之前
  • afterEnd 插入到标签结束之后

html：要插入的html代码 或 Text内容

div.insertAdjacentHTML("beforeEnd", html);//插入到标签结束标记前（常用1：在DOM内部最末端插入html）div.insertAdjacentHTML("afterBegin", html);//插入到标签开始标记之后（常用2：在DOM内部最前面插入html）div.insertAdjacentHTML("beforeBegin", html);//插入到标签开始前div.insertAdjacentHTML("afterEnd", html);//插入到标签结束标记后

上面的代码插入位置入下图所示

更多相关：

  • 排序算法之直接插入排序

    1、基本思想：        已知待排序列r[1...n],先将序列中的第一个记录看成是一个有序的子序列，然后从第二个记录起逐个进行插入，直至整个序列变成关键字非递减有序序列为止。 具体操作如下：     （1）查找出r[i]在有序序列r[1...i-1]中的插入位置k;     （2）将r[k...i-1]中所有元素全部后移一个位...

  • oracle与mysql创建表时的区别

    oracle创建表时，不支持在建表时同时增加字段注释。故采用以下方式： #创建表 CREATE TABLE predict_data as (id integer NOT NULL, uid varchar2(80),mid varchar2(8...

  • EXCEL基础篇（二）

    本章主要内容 一、单元格操作 二、插入批注 三、自动求和 四、填充序列 五、查找、替换 六、对齐方式 七、定位 八、插入形状及设置形状 九、页面设置   一单元格操作 1、插入 a、插入单元格    一个单元格选中状态---右击插入（单元左右移）--即可 b、插入单元行/列 c、插入多行单元行/列    选中多行---右击插入----...

  • python爬图片教程_python爬去妹子网整个图片资源教程（最详细版）

    爬取妹子网的低级教程连接如下：[爬妹子网](https://blog.csdn.net/baidu_35085676/article/details/68958267) ps：只支持单个套图下载，不支持整体下载 在说说我的这个爬虫代码的设计思路： ①当我们浏览这个网站时，会发现，每一个页面的URL都是以网站的域名+page+页数组成，...

  • 【硬核技能】舒工自创bind绑定数据方法，类似angular和vue绑定数据原理

    if ($g) {$g.$utils || ($g.$utils = {}); } else {var $g = {};$g.$utils = {}; } /*绑定数据神器*/ $g.$utils.bind = {a(html, obj) {return this.object(html, obj);},object(h, o) {f...

  • 不能忽略的Nginx做web服务器的favicon.ico图像找不到问题

    我们在使用Nginx搭建HTTP的web server的过程中，一般都很顺利，默认的网站根目录一般是/usr/local/nginx/html，我们也可以正常访问到Nginx的欢迎信息，比如使用下面的网址： http://localhost/ 但是发现运行一段时间后，Nginx的error日志中会定期抱怨说，没有找到favicon...

  • 吴裕雄--天生自然 JAVASCRIPT开发学习：（String） 对象

    菜鸟教程(runoob.com)