CODEWITHSUNDEEP
javascriptjqueryhtml
New Guy
New Guy

Reputation: 596

Modify HTML Tags for HTML in a variable not the document

Alright,

I think this is a random question. I was unable to find it while searching on here. Maybe my wording was off. Anyway. this is what I need. I have some html that I obtained from an element using the outerHTML method. It is stored in a variable

objCodes.refDocs

Now that contains just html. What I need to do is modify the html within that variable. I need to change out the id that is in one of the div tags. The div id is random (created by a repeater is ASP.NET) so I need to use a selector like the following [id^=dvSearcher]. I've tried doing the following but it didn't do anything to my objCodes.refDocs html.

$(objCodes.refDocs).find('[id^=dvSearcher]').attr('id', 'newID');

Is there a way to just modify the html in that variable ? I can extract the element by just using the find method and setting it to a variable. I just need to modify that one part though.

Any help would be appreciated:- Thank you.

Upvotes: 0

Views: 64

Answers (1)

epascarello
epascarello

Reputation: 207501

The problem here is the fact you are not storing the newly updated string back into the variable.

The string will not get updated, you need to do it.

//What you are doing

var objCodes = {
    refDocs : '<div><div id="dvSearcher"></div></div>'
};

var html = $(objCodes.refDocs);
html.find('[id^=dvSearcher]').attr('id', 'newID');
console.log("I was changed: ", html.html());  //shows updated code
console.log("My value: ", objCodes.refDocs);  //show orginal

//What you need to do
var updatedHTML = $("<div/>").html(objCodes.refDocs);
updatedHTML.find('[id^=dvSearcher]').attr('id', 'newID');
objCodes.refDocs = updatedHTML.html();
console.log("new string: ", objCodes.refDocs);  //updated html string

Other option is to store the DOM into the variable and than that will keep the changes.

var objCodes2 = {
    refDocs : $('<div><div id="dvSearcher"></div></div>')
};
objCodes2.refDocs.find('[id^=dvSearcher]').attr('id', 'newID');
console.log("The DOMish way: ", objCodes2.refDocs.html());

JSFiddle

Upvotes: 1

Related Questions