javascript - Changing text after a span - Stack Overflow

admin管理员组

文章数量:1327750

Is it possible in jquery to insert text after a span. For example, I would like to change the price value after the dollar sign below.

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

The only way I can see how to do this, is to remove the span element (store as variable), add the price value, and then append the currency value again. Seems pretty hacky.

Is it possible in jquery to insert text after a span. For example, I would like to change the price value after the dollar sign below.

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

The only way I can see how to do this, is to remove the span element (store as variable), add the price value, and then append the currency value again. Seems pretty hacky.

• javascript
• jquery
• html

Share Improve this question Follow asked Feb 11, 2016 at 9:34 Oliver WatkinsOliver Watkins 13.5k3939 gold badges134134 silver badges250250 bronze badges 5

• 1 You can do it by accessing (and modifying the value of) the textnode holding the amount, like shown here: jsfiddle/7mdygLLs – techfoobar Commented Feb 11, 2016 at 9:42
• why is this down voted, and voted to close? – Oliver Watkins Commented Feb 11, 2016 at 10:01
• I wonder why too. Can't find anything wrong with the question at all. – techfoobar Commented Feb 11, 2016 at 10:06
• @Oliver Watkins: that DOM looks kinda quirky – Gal Margalit Commented Feb 11, 2016 at 10:26
• Whoever down voted this question please specify reason so that questioner can correct his mistake from next time. – foxt7ot Commented Feb 11, 2016 at 10:28

Add a ment  | 

8 Answers 8

Sorted by: Reset to default 2

You can change the price using lastChild and nodeValue like following.

<script src="https://ajax.googleapis./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>

Yes you can do it as:

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

Just add another span to wrap around the price value.

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

Then you can $("#price-value") to manipulate that part on its own.

One another way

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

As a much easier alternative, one might also use CSS to prepend the currency symbol. This avoids using the span altogether and allows changing the currency symbol.

CSS Examples:

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

And a working code snippet:

$('#item1').html('10.00');

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

.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;
}

<script src="https://ajax.googleapis./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>

try this

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

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

Setting the text need some old fashioned JavaScript assistance. Using textContent.

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

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

You can try insertAfter() in jQuery.

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");
  });
});

本文标签： javascriptChanging text after a spanStack Overflow