insertAdjacentHTML可以动态插入网页内容

最新推荐文章于 2024-02-22 14:47:14 发布

原创最新推荐文章于 2024-02-22 14:47:14 发布 · 791 阅读

0 ·

CC 4.0 BY-SA版权

javascript 专栏收录该内容

3 篇文章

订阅专栏

本文通过一个具体的示例介绍了如何使用insertAdjacentHTML方法在DOM元素的不同位置插入新的HTML内容。该方法允许开发者灵活地在指定元素的开始前、结束后、开始后或结束前插入内容。

部署运行你感兴趣的模型镜像

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
	<HEAD>
		<title>insertAdjacentHTML插入新内容</title> 
		<script language="jscript">
		var num = 0;
		function addsome() 
		{ 
		num++;
		document.all.paral.insertAdjacentHTML("afterBegin","<h1>在文本前容器内插入内容"+num+"</h1>"); 
		document.all.paral.insertAdjacentHTML("beforeEnd","<h2>在文本后容器内插入内容"+num+"</h2>"); 
		document.all.paral.insertAdjacentHTML("beforeBegin","<h4>在文本前容器外插入内容"+num+"</h4>"); 
		document.all.paral.insertAdjacentHTML("afterEnd","<h5>在文本后容器外插入内容"+num+"</h5>"); 
		} 
		</script> 
	</head> 
	<body> 
		<div id="paral" style="fontsize:6;color='#ff00ff';border:1px red solid;">原来的内容</div>
		<hr> 
		<input type="button" onclick="addsome()" value="点击我">
	</body> 
</html>

您可能感兴趣的与本文相关的镜像