jQuery Editing innerHTML after selecting it with .html()

Question

I am generating rows dynamically with PHP from DB, once it compiles the initial page code looks something like this:

Snippet

<div class="options" id="options">
        <div class="left_wrap">
            <ul>
                <li class="col_id b-bottom"></li>
                <li class="hazard_header"><h3>Hazard</h3></li>
                <li class="hazard_input b-bottom"></li>
                <li class="con_header b-bottom"><h3>Controls</h3></li>
                <li class="cat_header"><h3>Consequence Category</h3></li>
                <li class="cat_options"></li>
            </ul>
        </div>
        <div class="right_wrap">
            <h2>Inherent Risk (Assessed risk without controls)</h2>
            <ul class="fields">
                <li class="bg b-top b-right"><h3>Consequence Level</h3><br/><span class="con_level_val"></span></li>
                <li class="b-top b-right"><h3>Probability</h3><br/>Possible</li>
                <li class="bg b-top b-right"><h3>Exposure (frequency)</h3><br/></li>

After page load I grab contents of the wrap options.

jQuery Snippet:

content = $("div.options").html();

Which in turns stores the above code in the variable content. Now, my question is how can I edit contents of variable content. For example I need to add value to li with class Col_ID like 1,2,3,4 and same when I am deleting I need to modify the contents again.

How can I do something along the lines content.getElement?

What do you mean by store? Do you really need that HTML string? If you omit the `.html()` you variable will have a reference to a perfectly usable jQuery Object, which does allow methods like `.find()`, what seems to be exaclty what you want. — acdcjunior, Apr 02 '15 at 00:21
I find it much easier to work with JQuery Objects... As @acdcjunior mentioned, you don't need the html, you can get the whole thing as an object by `var options = $("div.options);` Then from there, the find method to grab specific objects: `options.find("ul.fields");` You can also create objects in JQuery rather easily. See this answer for an example: http://stackoverflow.com/a/4158203/3033053 — disappointed in SO leadership, Apr 02 '15 at 00:24
All I want to do is grab the contents of WRAP (id="options") modify the elements and put it back into WRAP. What this app does is sort of a excel sheet that user can add and remove rows and edit columns. — I am Cavic, Apr 02 '15 at 00:27

score 2 · Accepted Answer · answered Apr 02 '15 at 00:32

If you really need to work with the HTML string, here's something you can do:

content = $("div.options").html();
var $content = $(content);
// now $content is a jQuery object with a bunch of (detached) elements
// you can use the common functions on it without problems, such as
$content.find("li.col_id").text("Some text");

// now you need to do something with $content, or everything you did will...
// ...be lost. You cold, for instance, update the other variable back:
content = $content.html();
// content now has the updated HTML

Now, if you don't need the HTML string at all, then you can work directly like:

content = $("div.options");
content.find("li.col_id").text("Some text");
// now the DOM was already updated as you are dealing with attached elements

Perfect thanks, this is even better than what I was trying to do :) — I am Cavic, Apr 02 '15 at 00:41

jQuery Editing innerHTML after selecting it with .html()

1 Answers1