本节我们要实现的是，动态修改页面中的内容，通过本案例主要是为了回顾前面所讲的节点属性操作。
实现逻辑如下：
页面中定义一个用来测试的p标签，里面包含任意内容，点击按钮，实现对P标签中内容的修改，大家可以先自己动手试试看，确实做不出来再看以下代码。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>动态修改页面内容</title>
<style type="text/css">
.cls{
background-color: black;
}
</style>
</head>
<body class="" id="body">
<p id="p">请修改我</p>
<input type="button" id="btn2" value="修改">
<script type="text/javascript">
//点击按钮 ，修改p标签中的内容，即p标签的innerHTML属性
//获取按钮
var btn = document.getElementById('btn2');
//绑定点击事件
btn.onclick = function(){
//事件处理函数中，获取p标签，修改内容
var p = document.getElementById('p');
// console.log(p.innerHTML);
p.innerHTML = '成功的实现了修改';
}
</script>
</body>
</html>
|
窥视卡
雷达卡
发表于 2023-1-26 22:14:26
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡
发表于 2023-2-20 09:40:05
