insertAdjacentHTML方法详解

本文介绍了一种更灵活的DOM操作方法——insertAdjacentHTML,该方法允许开发者在指定位置插入HTML内容,增强了网页元素的编辑能力。通过示例展示了如何使用此方法在不同位置插入内容。

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

添加HTML内容与文本内容以前用的是innerHTML与innerText方法,
最近发现还有insertAdjacentHTML和 insertAdjacentText方法,
这两个方法更灵活,可以在指定的地方插入html内容和文本内容。
insertAdjacentText方法与 insertAdjacentHTML方法类似,只不过只能插入纯文本,参数相同
insertAdjacentHTML 方法:在指定的地方插入html标签语句

原型:insertAdajcentHTML(swhere,stext)

参数:
swhere: 指定插入html标签语句的地方,
stext:要插入的内容

有四种值可用:

1. beforeBegin: 插入到标签开始前
2. afterBegin:插入到标签开始标记之后
3. beforeEnd:插入到标签结束标记前

4. afterEnd:插入到标签结束标记后

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>insertAdjacentHTML1</title>
<style type="text/css">
	#one{ border:1px solid #ddd;}
</style>
</head>

<body>
<div id="one">insertAdjacentHTML</div>
<script type="text/javascript">
var d1 = document.getElementById('one'); 
d1.insertAdjacentHTML('beforeBegin', '<div class="a">beforeBegin</div>');
d1.insertAdjacentHTML('afterBegin', '<div class="b">afterBegin</div>');
d1.insertAdjacentHTML('beforeEnd', '<div class="c">beforeEnd</div>');
d1.insertAdjacentHTML('afterend', '<div class="d">afterend</div>');
</script>
</body>
</html>

结果如下:

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值