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

Answer 1

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>";

Answer 2

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>';

Answer 3

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);