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

Approach to avoid DOM elements from being removed on .text()

本文关键字：DOM 删除 元素 方法 text      更新时间：2023-09-26

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

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

从Javascript中，我设置了"myButton"元素的文本使用，

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

我理解.text()将设置"myButton"的内容，并将删除现有的img元素。

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

p。我提到一个简单的方法作为答案。

我们可以像下面这样添加一个额外的span元素，

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

并将文本设置在添加的span上。

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

我认为更灵活的方法是使用CSS背景而不是img标签:

#myButton {
    background: url(Images/arrow2.png) no-repeat right center;
}
HTML:

和

<a href="#" id="myButton" class="BtnClass">Submit</a>

在这种情况下，您不必担心文本，可以继续使用$("#textHere").text("Submit Form");。

检查下面的小演示。

setTimeout(function() {
  $('#myButton').text('Submit Form');
}, 2000);
#myButton {
    background: #888 url(https://cdn3.iconfinder.com/data/icons/google-material-design-icons/48/ic_keyboard_arrow_right_48px-20.png) no-repeat right center;
    padding: 5px 20px 5px 10px;
    border-radius: 4px;
    border: 1px solid #111;
    color: #FFF;
    font-family: Arial;
    text-decoration: none;
}
#myButton:hover {
    background-color: #AAA;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" id="myButton" class="BtnClass">Submit</a>

尝试像这样将文本附加到a标签上:

$(document).ready(function(){
$("#myButton").append('Submit Form');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" id="myButton" class="BtnClass">
  <img src="https://googledrive.com/host/0B3_2aPWXzW1LeDhndmRjRXhWUHc"/>
</a>

另一个解决方案是修改第一个textNode值。在这种情况下，您不需要修改按钮的HTML结构。

setTimeout(function() {
  
  var button = $('#myButton')[0];
  
  // Create text node if it's not the first child of the button
  if (button.firstChild.nodeType !== 3) {
    button.insertBefore(document.createTextNode(''), button.firstChild);
  }
  
  // Change text node value
  button.firstChild.nodeValue = 'Submit Form';
}, 2000);
#myButton {
    background: #888;
    padding: 5px 10px;
    border-radius: 4px;
    border: 1px solid #111;
    color: #FFF;
    font-family: Arial;
    text-decoration: none;
}
#myButton img {vertical-align: bottom; display: inline;}
#myButton:hover {
    background-color: #AAA;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" id="myButton" class="BtnClass">
  <img src="https://cdn3.iconfinder.com/data/icons/google-material-design-icons/48/ic_keyboard_arrow_right_48px-20.png"/>
</a>

相关文章：