JQuery assign HTML content to variable

Question

I am trying to get HTML code to jquery variable and it is working in following code:

var html_var = $(this).parent().html();

But when I want to modify "html_var" I cannot do it, I mean, the html code contains button tag and I need to change this button's value and id? I tried with "find" but I don't why it didn'y work.

var modified_var = html_var.find('.button').attr('id');

.html() gets the html, not the DOM elements, so you can't find the button by class etc. — devqon
– devqon, Commented Oct 13, 2014 at 12:54
Either manipulate the DOM: $(this).parent().find(".button").attr("id", someValue) or use regex/replace to manipulate the html text. Depends on your use case — devqon
– devqon, Commented Oct 13, 2014 at 12:57

robobot3000 · Accepted Answer · 2014-10-13 12:56:13Z

3

.html() returns the html as plain text, so you can either operate on the parent object:

var $parent = $(this).parent();
$parent.find.('.button').attr('id', newValue);

or you can operate on the text

var html_var = $(this).parent().html();
//modify the text
$(this).parent().html(html_var); //replace the parent html with the modified html

answered Oct 13, 2014 at 12:56

robobot3000

5892 silver badges4 bronze badges

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

3 Comments

Umidjon Urunov Over a year ago

This method is working but after modifying $parent.find('button').attr('id', 'new_value'); and I tried to print $parent in alert but it displayed [Object obejct]

Umidjon Urunov Over a year ago

How can I use $print with modified version?

robobot3000 Over a year ago

$parent is a jquery object. To display its inner html you can still try outputting $parent.html()

alquist42 · Accepted Answer · 2014-10-13 12:56:08Z

2

var modified_var = $(html_var).find('.button').attr('id');

answered Oct 13, 2014 at 12:56

alquist42

7491 gold badge8 silver badges21 bronze badges

Comments

blue112 · Accepted Answer · 2014-10-13 12:53:48Z

1

var html_var = $(this).parent().html(); //Get HTML code
//Modify html_var
//...
$(this).parent().html(html_var); //Reapply modification

answered Oct 13, 2014 at 12:53

blue112

57.3k3 gold badges52 silver badges58 bronze badges

Comments

Leggy · Accepted Answer · 2014-10-13 13:23:26Z

1

As others have said, do not use the .html() in the html_var.

var html_var = $(this).parent();

Since it is a button tag you do not use the period/fullstop (.) Instead do this:

var modified_var = html_var.find('button');

Notice there is no (.) in the find?

To change the id do this:

modified_var.attr("id","new_id_goes_here");

To change the value of the button do this:

modified_var.html("value of button here");

To find out what the id is you can do this:

var theid = modified_var.attr("id");

EDIT:

Check out my fiddle: http://jsfiddle.net/r0huhx3v/8/

edited Oct 13, 2014 at 13:23

answered Oct 13, 2014 at 12:59

Leggy

6828 silver badges21 bronze badges

4 Comments

Umidjon Urunov Over a year ago

Thanks for your answer but I got an error "TypeError: undefined is not a function"

Leggy Over a year ago

Can you post the code you tried which received this error?

Umidjon Urunov Over a year ago

var html_var = $(this).parent().html(); var modified_var = html_var.find('button'); modified_var.attr('class');

Umidjon Urunov Over a year ago

Yes thanks it's working but I have to change button id and I have to use this variable. For example now the id is changed for $modified_var and with modified $modified_var I want to print but it returns me [Object object]

Collectives™ on Stack Overflow

JQuery assign HTML content to variable

4 Answers 4

3 Comments

Comments

Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

Comments

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related