How to modify html string using jQuery

Question

I try to use jQuery to modify the HTML template.

For example:

var d = '<div class="a"><div class="b"></div><div class="c"></div></div>';

var html = $(d).find(".b").html("BBBBB");

console.log(d);   // I want to get the new html

In above, I want to get

'<div class="a"><div class="b">BBBBB</div><div class="c"></div></div>'

How can implement the case？ Please suggest.

d is a variable and not DOM element. So it has no .html() method on it. What you actually want to achieve? — Imad
– Imad, Commented Dec 2, 2014 at 5:29
Because html string in a variable, not in brower document, I just can get it by find. @Aditya — kenticny
– kenticny, Commented Dec 2, 2014 at 5:36

GregL · Accepted Answer · 2014-12-02 05:30:17Z

9

So here is the code:

var d = '<div class="a"><div class="b"></div><div class="c"></div></div>';

var html = $(d).find(".b").html("BBBBB").end()[0].outerHTML;

console.log(html);

Note the key is to use .end(), which will pop off the context of <div class="b"> created by the .find() operation and return you to just $(d), which then allows you to get the full HTML using .outerHTML on the raw DOM node.

answered Dec 2, 2014 at 5:30

GregL

38.2k8 gold badges65 silver badges68 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Fizzix Over a year ago

This is the correct answer and by far the best way to achieve it, +1

Romisha Aggarwal · Accepted Answer · 2014-12-02 05:31:44Z

0

var d = '<div class="a"><div class="b"></div><div class="c"></div></div>';

$('.a').find(".b").html("BBBBB");
var newD = $('.a').parent().html();

console.log(newD);

You are writing into a DOM element not a variable. You need the again fetch the modified DOM element.

answered Dec 2, 2014 at 5:31

Romisha Aggarwal

3212 silver badges14 bronze badges

Collectives™ on Stack Overflow

How to modify html string using jQuery

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related