jQuery - add element after text

Question

i have a navigation with some links:

<ul class="nav">
 <li>
  <a class="active">linkname</a>
 <li>
</ul>

now i need to add extra content directly after "linkname" like this:

<ul class="nav">
 <li>
  <a class="active">linkname<b class="caret"></b></a>
 <li>
</ul>

how can i add elements (div,span,b) directly after specific text?

Answer 1

Try .append()

$('ul.nav a.active').append('<b class="caret"></b>');

fiddle Demo

Answer 2

$('a.active').html($('a.active').text() + '<b class="caret"></b>');

Updates:

Wonder if this question to be like how to insert an element inbetween the text

<a class="active">link<b class="caret">BOLD</b>name</a>

So I tried like

String.prototype.splice = function (idx, rem, s) {
    return (this.slice(0, idx) + s + this.slice(idx + Math.abs(rem)));
};

var text = $('a.active').text();
var ind = text.indexOf('name'); //specify where to add the text
var result = text.splice(ind, 0, '<b class="caret">BOLD</b>');
$('a.active').html(result);

Got this protoype splice from @user113716's answer.

JSFiddle

Answer 3

$("a.active").append("<b class='caret'></b>");

Answer 4

Try:

append() inserts content to the end of each element in the set of matched elements.

$(".nav .active").append("<b class='caret'></b>");

Answer 5

you can work with .append()

like:

<ul class="nav">
  <li>
    <a id="myelement" class="active">linkname<b class="caret"></b></a>
  <li>
</ul>

javascript:

$("#myelement").append("whatever you want to add after linkname");

Answer 6

Try .html() and replace if you need to add the element specifically after a text like linkname

$('.active').html(function(){
  return this.innerHTML.replace("linkname","linkname" + '<b class="caret"></b>');
});

DEMO

Answer 7

You can use append like this:

$('a.active').append('<b class="caret"></b>');

Or like this:

var b = '<b class="caret"></b>';
var a = $('a.active');
b.appendTo(a);

Or like this:

$('a.active').append($('b.caret'));

Answer 8

A quick test shows that this should do the job:

var c = '<b class="caret"></b>';
$(".active").append(c);

or as a oneliner ...

$(".active").append('<b class="caret"></b>');

Answer 9

Try this:

 var ele = document.querySelector("a.active");
     ele.innerHTML += "<b class="caret"></b>";