How to do in jquery adding new element?

Question

I have:

<li class="active"><a href="/">Start</a></li>

How to do in jquery adding new element:

<li class="active"><a href="/"><em><span>Start</span></em></a></li>

I need to add <em><span> </span></em>

[jQuery Select and wrap textNode](http://stackoverflow.com/questions/5291703/jquery-select-and-wrap-textnode) — Andreas, Dec 13 '13 at 11:31
Give [KnockoutJS](http://knockoutjs.com/) a look as well. Doing DOM manipulation is quick and dirty, but if you're wanting to build a more maintainable code base then switching to a MVVM structure will help by making it so you don't have to rewrite your code everytime you change your markup, and vice versa. — Jim Yarbro, Dec 13 '13 at 11:44

score 6 · Answer 1 · answered Dec 13 '13 at 11:32

6

You can use .wrapInner() to un-obstructively insert new tags within an existing DOM element

$('.active a').wrapInner('<em><span></span></em>');

Fiddle: http://jsfiddle.net/az8PA/

answered Dec 13 '13 at 11:32

MackieeE

Milind Anantwar · Answer 2 · 2013-12-13T11:38:40.267

0

Try This:

$('li.active a').each(function () {
$(this).wrapInner('<em><span></span></em>');
});

edited Dec 13 '13 at 11:38

answered Dec 13 '13 at 11:33

Milind Anantwar

score 0 · Answer 3 · answered Dec 13 '13 at 11:33

0

$('li.active a').each(function () {
    var text = $(this).text();
    $(this).html('<em><span>' + text + '</span></em>');
});

answered Dec 13 '13 at 11:33

AfromanJ

score 0 · Answer 4 · answered Dec 13 '13 at 11:34

0

Try This:

<li class="active"><a href="/" id="sample">Start</a></li>

    $("#sample").empty();
    $("#sample").append('<em><span>Start</span>');

now you got following:

<li class="active"><a href="/"><em><span>Start</span></em></a></li>

answered Dec 13 '13 at 11:34

Mr.G

score 0 · Answer 5 · answered Dec 13 '13 at 11:34

0

$('li a').wrapInner('<em><span></span></em>');

answered Dec 13 '13 at 11:34

patel.milanb

5 Answers5