js用dom写入html元素来实现v-show的vue方法

最新推荐文章于 2024-05-06 21:51:47 发布

原创最新推荐文章于 2024-05-06 21:51:47 发布 · 731 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#js

js 专栏收录该内容

4 篇文章

订阅专栏

本文介绍如何使用JavaScript的DOM操作来模拟v-show效果，通过点击按钮显示或隐藏HTML元素。适用于希望了解基本DOM操作和元素显示控制的前端开发者。

为了用JavaScript实现一个单选框的不同选择能v-show不同的内容，我采取了js的dom写入html元素的方法。

首先得要先赋予这个元素一个id。
接着dom出这个元素，选出它的innerHTML属性赋值即可，这样是可以写入标签的。

<body>
	<div id='id1'></div>
	<button id='id2'>点击添加（show）</button>
	<button id='id3'>点击删除（hide）</button>
	<script>
		document.querySelector('#id2').addEventListener('click', function () {
		document.querySelector('#id1').innerHTML = '<span>123</span>'})
		document.querySelector('#id3').addEventListener('click', function () {
		document.querySelector('#id1').innerHTML = ''})
	</script>
</body>