insertAdjacentHTML的简单用法

最新推荐文章于 2022-03-23 16:54:47 发布

jyz6246

最新推荐文章于 2022-03-23 16:54:47 发布

阅读量2.7k

点赞数 1

分类专栏： JavaScript 文章标签： javascript

JavaScript 专栏收录该内容

2 篇文章

订阅专栏

本文详细介绍了HTML5新增的insertAdjacentHTML方法，该方法允许开发者直接通过字符串的形式将HTML元素插入到指定元素的不同位置，包括元素内部的前后位置及外部的前后位置。文中还通过实例比较了该方法与jQuery中元素插入方法的区别。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

主要是添加元素用的，当然在原生的js中已经有两个了：
1. 父元素.appendChild(obj);
2. 父元素.insertBefore(obj,谁前面);

在这里面我想拿jquery做个对比：

首先声明，整个文章页面的结构是：
<input type=“button” value=“插入h3” id=“btn1“>
<div id=“div1“>
       <h2>h2h2h2</h2>
</div>

jquery里面添加元素的方式有：

 物体的内部插入：

obj.appendTo(父节点);  -> 内部的后面
$(function(){
    $(‘#btn1′).click(function(){
        $(‘<h3>h3h3h3h</h3>‘).appendTo(‘#div1′);
    });
});

obj.prependTo(父节点)  -> 内部的前面
$(function(){
    $(‘#btn1′).click(function(){
        $(‘<h3>h3h3h3h</h3>‘).prependTo(‘#div1′);
    });
});

 物体的外部插入：
obj.insertBefore(父节点); -> 外部的前面
$(function(){
    $(‘#btn1′).click(function(){
        $(‘<h3>h3h3h3h</h3>‘).insertBefore(‘#div1′);
        });
});

obj.insertAfter(父节点);  -> 外部的后面
$(function(){
    $(‘#btn1′).click(function(){
        $(‘<h3>h3h3h3h</h3>‘).insertAfter(‘#div1′);
    });
});

今天介绍的insertAdjacentHTML就是类似jquery里面的这几种功能：

用法：父级.insertAdjacentHTML(插入的方式,字符串元素);

1. 内部的后面添加：相当于jquery中的appendTo

父级.insertAdjacentHTML(‘beforeEnd’,字符串元素);

window.onload=function(){
    var oBtn=document.getElementById(‘btn1‘);
    var oDiv=document.getElementById(‘div1‘);
    oBtn.onclick=function(){
        oDiv.insertAdjacentHTML(‘beforeEnd‘,‘<h3>h3h3h3h3</h3>‘);
    };
};
2. 内部的前面添加：相当于jquery中的prependTo

父级.insertAdjacentHTML(‘afterBegin’,字符串元素);

window.onload=function(){
    var oBtn=document.getElementById(‘btn1‘);
    var oDiv=document.getElementById(‘div1‘);
    oBtn.onclick=function(){
        oDiv.insertAdjacentHTML(‘afterBegin‘,‘<h3>h3h3h3h3</h3>‘);
    };
};
3. 外部的前面添加： 相当于jquery中的insertBefore

父级.insertAdjacentHTML(‘beforeBegin’,字符串元素);
window.onload=function(){
    var oBtn=document.getElementById(‘btn1‘);
    var oDiv=document.getElementById(‘div1‘);
    oBtn.onclick=function(){
        oDiv.insertAdjacentHTML(‘afterEnd‘,‘<h3>h3h3h3h3</h3>‘);
    };
};