Dynamically change jquery variable

Question

I am trying to generate an element from variable in jquery. My variable is like below:

var panelheader = "<div class='panel panel-default'><div class='panel-heading pnlbld'>Test</div><div class='panel-body'></div></div>"

I want to change panel-heading text and want to insert in panel-body.

$(panelheader + '.panel-heading').text('Name')

Above statement removes all divs inside panel with text Name. But I want this as panel-heading.

Also, when I tried to insert table between panel-body like below:

$(panelheader + '.panel-body').prepend(mytbl)

It creates table before panel-heading.

I want the "Name" to be in the place of "Test" and mytbl in between

<div class='panel-body'></div>

$(panelheader).find('.panel-heading').text('Name') and same for panel-body — Tushar
– Tushar, Commented Oct 16, 2015 at 15:01
In addition to the above you need to do $(panelheader).find('.panel-body').html(myTbl) to put your table as the content of panel-body — Sandeep Nayak
– Sandeep Nayak, Commented Oct 16, 2015 at 15:04

Barmar · Accepted Answer · 2015-10-16 15:03:36Z

1

You need to convert the HTML string in panel-header into DOM elements, and then do the replacement in that.

var ph = $(panelheader);
ph.find(".panel-heading").text('Name');
$("#somediv").append(ph);

answered Oct 16, 2015 at 15:03

Barmar

789k57 gold badges554 silver badges669 bronze badges

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

1 Answer 1