A search a way to replace test by another value

Question

I display a part of a menu with

<li id="userInfo" role="presentation" data-toggle="tab" class="dropdown"> <a href="#" name="usernameMenu" class="dropdown-toggle" data-toggle="dropdown" role="button"> <span class="glyphicon glyphicon-user"></span><span class="caret"></span> </a> ... </li>

After i add a text

$('a[name="usernameMenu"] span:eq(0)').after("test");

In the html code i see

<li id="userInfo" role="presentation" data-toggle="tab" class="dropdown"> <a href="#" name="usernameMenu" class="dropdown-toggle" data-toggle="dropdown" role="button"> <span class="glyphicon glyphicon-user"></span>test<span class="caret"></span> </a> ... </li>

A search a way to replace test in this html code by another value

I'm not sure what you are after, change test to something else with the same code you already have. $('a[name="usernameMenu"] span:eq(0)').after("new text"); — chungtinhlakho
– chungtinhlakho, Commented Jun 3, 2016 at 0:28
Updated my answer - it turned out to be trickier than I thought — blurfus
– blurfus, Commented Jun 3, 2016 at 1:06

Community · Accepted Answer · 2017-05-23 12:31:48Z

If I understood correctly, you want to append a text node after the span and then later replace it with something else.

This answer gives you a way to get the next 'text' element. With that, you can assign a value like the sample code below:

$(function() { $('a[name="usernameMenu"] span:eq(0)').after(" test "); setTimeout( function(){ // getting the next text element done line this $('a[name="usernameMenu"] span:eq(0)')[0].nextSibling.nodeValue = "new TEXT" }, 3000 ); // wait 3 secs before changing it });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"> Text below will change in 3 secs <li id="userInfo" role="presentation" data-toggle="tab" class="dropdown"> <a href="#" name="usernameMenu" class="dropdown-toggle" data-toggle="dropdown" role="button"> <span class="glyphicon glyphicon-user"></span><span class="caret"></span> </a> </li>

You lose the glyphicon-user, much like I did with my first answer.
Yes, just realized that... playing with the selector right now - Updated my answer - thx @J.Titus

J. Titus · Accepted Answer · 2016-06-03 00:34:44Z

Maybe a hacky solution, but find and replace test:

var t = $('a[name="usernameMenu"]').html(); $('a[name="usernameMenu"]').html(t.replace('test', 'another value'));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <li id="userInfo" role="presentation" data-toggle="tab" class="dropdown"> <a href="#" name="usernameMenu" class="dropdown-toggle" data-toggle="dropdown" role="button"> <span class="glyphicon glyphicon-user"></span>test<span class="caret"></span> </a> ... </li>

Collectives™ on Stack Overflow

A search a way to replace test by another value

2 Answers 2

2 Comments

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Linked

Related