Question

在jquery中是否可以在 span 之后插入文本。例如，我想在下面的美元符号后更改价格值。

<div id="price">
    <span>$</span>
    10.00
</div>

我能看到如何执行此操作的唯一方法是删除span元素（存储为变量），添加价格值，然后再次附加货币值。看起来非常hacky。

Answer 1

是的，你可以这样做：

$("#price").contents(":not(span)").text("Text");

Answer 2

您可以使用lastChild和nodeValue更改价格，如下所示。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="price">
    <span>$</span>
    10.00
</div>

<script>
    var price = $('#price')[0];
    price.lastChild.nodeValue = "155.00";
</script>

Answer 3

只需添加另一个范围即可包围价格值。

<div id="price">
    <span>$</span>
    <span id="price-value">10.00</span>
</div>

然后你可以$("#price-value")自己操纵那个部分。

Answer 4

作为一种更容易的替代方案，人们也可以使用CSS来添加货币符号。这样可以避免完全使用跨度，并允许更改货币符号。

CSS示例：

.currency div::before {  content: "$" }
.currency.yen div::before { content: "¥" }

正在运行的代码段：

＆＃13;

$('#item1').html('10.00');

$('#item2').html('8.80'); 
                       
$('#item3').html( '20.30');

＆＃13;

.currency.dollar div::before {  content: "$" }
.currency.pound div::before {  content: "£" }

.currency {
  font-family: monospace;
  font-size: 24px;
  font-weight: bold;
  border: 1px lightgray solid;
  width: 8em;
  padding: 4px;
  text-align: right;
  background-color: ghostwhite;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div class="currency dollar">

  <div id="item1"></div>

  <div id="item2"></div>

  <div id="item3"></div>

</div>

＆＃13;

Answer 5

试试这个

$("#pri").text("100");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="price">
    <span id='si'>$</span>
    <span id='pri'>10.00</span>
</div>

Answer 6

另一种方式

<script src="http://code.jquery.com/jquery.min.js"></script>
<div id="price">
    <span>$</span>
    10.00
</div>
<script type="text/javascript">
$('#price').contents().last()[0].textContent=' 20.00';
</script>

Answer 7

设置文本需要一些老式的JavaScript帮助。使用textContent。

$('#price').contents().filter(function() {
    return this.nodeType == 3;
}).last()[0].textContent = 'changed';

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="price">
  <span>$</span>
  10.00
</div>

Answer 8

您可以在jQuery中尝试insertAfter（）。

<强> HTML：

<button>Insert span element after span element</button>
<br>
<div id="price">
<span>$</span>
</div>

<强> jQuery的：

$(document).ready(function(){
  $("button").click(function(){
     $("<span>100</span>").insertAfter("span");
  });
});

跨度后更改文本

8 个答案: