如何在点击时显示span？

<button onclick="showSpan()">点击显示<span id="mySpan" style="display: none;">这是一个<span>元素</span></span></button>

<script>
function showSpan() {
  var span = document.getElementById("mySpan");
  span.style.display = "inline"; // 修改样式为显示
}
</script>

<a href="#mySpan">点击显示</a>
<span id="mySpan" style="display: none;">这是一个<span>元素</span></span>

<style>
#mySpan:target {
  display: inline; // 修改样式为显示
}
</style>

<button id="myButton">点击显示</button>
<span id="mySpan" style="display: none;">这是一个<span>元素</span></span>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$("#myButton").click(function() {
  $("#mySpan").show(); // 修改样式为显示
});
</script>