javascript - 避免 DOM 元素在 .text() 上被删除的方法

Question

我有下面的 anchor 元素，其中包含较小的图像。

<a href="#" id="myButton" class="BtnClass">
  <img src="Images/arrow2.png"/>
</a>

在 Javascript 中，我使用以下方法设置“myButton”元素的文本:

$("#myButton").text("Submit Form");

据我了解，.text() 将设置“myButton”的内容，并将删除现有的 img 元素。

我想了解避免从 DOM 中删除 img 元素的最佳方法。

P.S 我在回答中提到了一种简单的方法。请提出其他可能的解决方案。

Answer 1

我们可以添加一个额外的 span 元素，如下所示，

<a href="#" id="myButton" class="BtnClass">
  <span id="textHere"></span> <!--New Span-->
  <img alt="IMG NOT AVAIABLE" src="Images/arrow2.png"/>
</a>

并在添加的跨度上设置文本。

$("#textHere").text("Submit Form");