0

Suppose I had the following div:

<div id = "master">
     "Random Text
     <span id = "unknown">...</span>
</div>

If I didn't know the id of the span, how would I modify the "Random Text" using jQuery?

Note the proposed duplicate's answer is javascript not jQuery.

Community
  • 1
  • 1
DarkHorse
  • 963
  • 1
  • 10
  • 28
  • 1
    @JorgeMejia you aren't reading the question. OP wants to change the text node – charlietfl Dec 17 '16 at 16:15
  • 1
    Do you have any means by which you can identify the text that you wish to change? Will it always appear before a `` tag, will it always be the string `"Random Text"`? – David Thomas Dec 17 '16 at 16:23

4 Answers4

2

Use the node type property to find the text node

node type 3 is for the text node.

http://www.w3schools.com/jsref/prop_node_nodetype.asp

You can use the nodeValue property to set the text of a text node element

var textNodeList = $("#master")
  .contents()
  .filter(function() {
    return this.nodeType === 3; //Node.TEXT_NODE
  });


textNodeList[0].nodeValue = "Not Random Text";
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id = "master">
     "Random Text
     <span id = "unknown">...</span>
</div>
Deep
  • 9,594
  • 2
  • 21
  • 33
0

jQuery does not have it's own text node methods.

Abstract approach using only jQuery that doesn't require knowing or using native dom methods or properties

$('#master').html(function(){
   return $(this).children().clone(true);// only return elements, clone to preserve any possible event handlers
}).prepend('Some new text');

Assumes there is only one text node child of #master

charlietfl
  • 170,828
  • 13
  • 121
  • 150
-1

You could do this:

var masterDiv = $('#master');
var text_to_change = masterDiv.childNodes[0];
text_to_change.nodeValue = 'new text';

This should get is working.

Abhishek Maurya
  • 321
  • 1
  • 3
  • 13
  • Whats the difference. just change the selectors – Abhishek Maurya Dec 17 '16 at 16:26
  • @Mahi jQuery doesn't have text node methods. Stop complaining about using native dom methods if you don't have a solution yourself – charlietfl Dec 17 '16 at 16:29
  • that's why he asked question to solve using jquery only – Mahi Dec 17 '16 at 16:31
  • @Mahi what OP asked is irrelevant if such methods don't exist. – charlietfl Dec 17 '16 at 16:32
  • but you can make using pure jquery . – Mahi Dec 17 '16 at 16:33
  • 1
    @Mahi then provide a solution instead of complaining about all the others. No matter what you do you need to use native dom methods or properties. There are numerous ways to do this – charlietfl Dec 17 '16 at 16:33
  • i don't post answer just for votes. i have already flag as duplicate . and OP Didn't asked to solve this question using JS. read question before posting answer. – Mahi Dec 17 '16 at 16:41
  • @Mahi but that solution also requires using native dom properties that are not jQuery. The jQuery library is javascript. Stop all the complaining!! That being said, I posted an answer that does meet your criteria – charlietfl Dec 17 '16 at 16:43
  • @Mahi I too don't understand what's your deal? You either use jquery or javascript, it is not going to make any difference. – Abhishek Maurya Dec 17 '16 at 16:46
  • i know we can simply do using js. but he meant can we do using jquery . and you are posting js answer that means you can't do with jquery ? – Mahi Dec 17 '16 at 16:50
-1

Maybe something like this?

$('#unknown')[0].previousSibling.nodeValue = 'something else';

JSFiddle

Flash Thunder
  • 11,672
  • 8
  • 47
  • 91