edit (append?) a string stored in a jquery variable

Question

I am bringing a big html string inside an ajax call that I want to modify before I use it on the page. I am wondering if it is possible to edit the string if i store it in a variable then use the newly edited string. In the success of the ajax call this is what I do :

    $.each(data.arrangement, function() {
              var strHere = "";
              strHere = this.htmlContent;
                      //add new content into  strHere  here
              var content = "<li id=" + this.id + ">" + strHere +      "</li>";

htmlContent is the key for the chunk of html code I am storing in the string. It has no problem storing the string (I checked with an alert), but the issue is I need to target a div within the stored string called .widgteFooter, and then add some extra html into that (2 small divs). Is this possible with jquery? Thanks

Barmar · Accepted Answer · 2014-06-24 17:48:16Z

5

Convert the string into DOM elements:

domHere = $("<div>" + strHere + "</div>");

Then you can update this DOM with:

$(".widgetFooter", domHere).append("<div>...</div><div>...</div>");

Then do:

var content = "<li id=" + this.id + ">" + domHere.html() +      "</li>";

answered Jun 24, 2014 at 17:48

Barmar

789k57 gold badges555 silver badges669 bronze badges

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

Comments

PeterKA · Accepted Answer · 2014-06-24 17:58:21Z

0

An alternative way to @Barmar's would be:

var domHere = $('<div/>').html( strHere ).find('.widgetFooter')
.append('<div>....</div>');

Then finish with:

var content = '<li id="' + this.id + '">' + domHere.html() + '</li>';

answered Jun 24, 2014 at 17:58

PeterKA

24.7k5 gold badges28 silver badges52 bronze badges

Comments

Guffa · Accepted Answer · 2014-06-24 18:09:47Z

0

You can manipulate the string, but in this case it's easier to create elements from it and then manipulate the elements:

var elements = $(this.htmlContent);
elements.find('.widgteFooter').append('<div>small</div><div>divs</div>');

Then put the elements in a list element instead of concatenating strings:

var item = $('<li>').attr('id', this.id).append(elements);

Now you can append the list element wherever you did previously append the string. (There is no point in turning into a string only to turn it into elements again.) Example:

$('#MyList').append(item);

edited Jun 24, 2014 at 18:09

answered Jun 24, 2014 at 18:01

Guffa

703k111 gold badges760 silver badges1k bronze badges

Collectives™ on Stack Overflow

edit (append?) a string stored in a jquery variable

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related