How can I change only the text inside a link

Question

I have the following link which i want to modify its text from "new subsite" to "create new customer site":-

enter image description here

so i wrote the following jquery :-

$('a#createnewsite').text('Create New Customer Site');

which replaced not only the text but also the span that contain the "+" image, while i was trying to keep everything except replacing the text.. here is the result after applying the jQuery :-

enter image description here

[How to select text nodes with jQuery](http://stackoverflow.com/questions/298750/how-do-i-select-text-nodes-with-jquery) — A1rPun, Jun 12 '15 at 14:30

score 1 · Answer 1 · answered Jun 12 '15 at 14:32

1

You need to select the text node, then change the text of it.

$('#createnewsite')
    .contents()
    .filter(function() { return this.nodeType === Node.TEXT_NODE; })
    .text('Create New Customer Site');

answered Jun 12 '15 at 14:32

A1rPun

15,440
6
55
87

this did not have any effect on the link – john Gu Jun 12 '15 at 14:41

Salman A · Accepted Answer · 2015-06-12T14:47:19.667

1

Text nodes can be selected by using jQuery.contents together with jQuery.filter:

$(function() {
  $("a#createnewsite").contents().filter(function() {
    // filter text nodes that contain one or more non-whitespace characters
    return this.nodeType === Node.TEXT_NODE && /\S/.test(this.nodeValue);
  }).replaceWith("new text");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<a id="createnewsite" href="#">
  <span>
    <img src="http://dummyimage.com/64x64/000/fff" width="64" height="64">
  </span>
  new subsite
</a>

edited Jun 12 '15 at 14:47

answered Jun 12 '15 at 14:34

Salman A

248,760
80
417
510

1

I think you meant to type a comparison instead of an assignment – A1rPun Jun 12 '15 at 14:35
Your markup probably has whitespace (screenshots do not always help). See revised answer. – Salman A Jun 12 '15 at 14:43
worked well after adding Node.TEXT_NODE && /\S/.test(this.nodeValue); – john Gu Jun 12 '15 at 14:43

How can I change only the text inside a link

2 Answers2