js怎么点击按钮替换元素
时间: 2023-06-07 08:07:53 浏览: 51
对于你的问题,我可以提供如下的 JavaScript 示例代码,它通过获取点击事件触发的元素,来完成对另一个元素内容的替换操作:
```
<!DOCTYPE html>
<html>
<head>
<title>Button Click to Replace Text</title>
<script type="text/javascript">
function replaceText() {
var button = event.target;
var replaceWith = button.dataset.replaceWith;
var target = document.querySelector(button.dataset.target);
target.innerHTML = replaceWith;
}
</script>
</head>
<body>
<p id="target">这是初始的文本内容。</p>
<button onclick="replaceText()" data-target="#target" data-replace-with="这是通过点击按钮替换后的文本内容。">点击替换文本</button>
</body>
</html>
```
在这个示例代码中,我们通过给 button 元素添加 data-target 和 data-replace-with 属性来指定需要替换的目标元素和替换后的文本内容。在替换文本的函数 replaceText 中,我们通过获取点击事件触发的按钮,以及 button 元素的两个 data 属性来获取目标元素和替换内容。最后,我们通过修改目标元素的 innerHTML 属性来实现文本的替换。