Manipulate HTML in Variable with jQuery

Question

I have a variable which is a portion of html :

<p>this is a test</p>
<ul>
<li>test1</li>
<li>test2</li>
<li>test3</li>
</ul>
<p>more content</p>
<ol>
<li>number 1</li>
<li>number 2</li>
<li>number 3</li>
</ol>
<p>more content again34234</p>
<ul>
<li>test4</li>
<li>test5</li>
<li>test6</li>
</ul>
<p>&nbsp;</p>

I want to manipulate the variable to find the ul elements and add a class. Then I also want to add a class to the li elements which are within ul only (so do not add a class to the ol li elements).

My code is this but it doesn't seem to do anything:

var itemValue = '<p>this is a test</p>\n' + 
'<ul>\n' + 
'<li>test1</li>\n' + 
'<li>test2</li>\n' + 
'<li>test3</li>\n' + 
'</ul>\n' + 
'<p>more content</p>\n' + 
'<ol>\n' + 
'<li>number 1</li>\n' + 
'<li>number 2</li>\n' + 
'<li>number 3</li>\n' + 
'</ol>\n' + 
'<p>more content again34234</p>\n' + 
'<ul>\n' + 
'<li>test4</li>\n' + 
'<li>test5</li>\n' + 
'<li>test6</li>\n' + 
'</ul>\n' + 
'<p>&nbsp;</p>';

console.log(itemValue);

$(itemValue).find("ul").addClass("CLASS_TEST");

console.log(itemValue);

What am I doing wrong?

Thanks.

I can't create the class at time of create - I get passed the value and need to manipulate it. — Mudders
– Mudders, Commented Dec 18, 2014 at 12:47
You can put your variable in some div or span with id ? then you can call $('#somediv').find('ul').addClass('YOUR_CLASS'); — waki
– waki, Commented Dec 18, 2014 at 12:50
Is it not possible to manipulate it directly from a variable? — Mudders
– Mudders, Commented Dec 18, 2014 at 12:51

PeterKA · Accepted Answer · 2014-12-18 13:35:37Z

2

Use the .filter() method instead of the .find() method as the element you're searching for is a top-level element per the structure of your HTML:

Sample Output:

outerHTML: "<ul class="CLASS_TEST">
           <li>test1</li>
           <li>test2</li>
           <li>test3</li>
           </ul>"

Here is a demo; bear in mind that the output of $html is a jquery collection. To output the whole html you may want to use some trick such as $('<div/>', {html:$html}).html()

var itemValue = '<p>this is a test</p>\n' + 
'<ul>\n' + 
'<li>test1</li>\n' + 
'<li>test2</li>\n' + 
'<li>test3</li>\n' + 
'</ul>\n' + 
'<p>more content</p>\n' + 
'<ol>\n' + 
'<li>number 1</li>\n' + 
'<li>number 2</li>\n' + 
'<li>number 3</li>\n' + 
'</ol>\n' + 
'<p>more content again34234</p>\n' + 
'<ul>\n' + 
'<li>test4</li>\n' + 
'<li>test5</li>\n' + 
'<li>test6</li>\n' + 
'</ul>\n' + 
'<p>&nbsp;</p>';

$html = $(itemValue);

console.log($('<div/>', {html:$html}).html());

$html.filter("ul").addClass("CLASS_TEST");

console.log($('<div/>', {html:$html}).html());

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

NOTE:

It would be better to add the class while creating the HTML. And the following is recommended for creating new HTML:

var $html = $('<p/>', {text: 'this is a test'})
            .add( $('<ul/>').html( ...... ).append( ... ) )
            .add( ...... );

edited Dec 18, 2014 at 13:35

answered Dec 18, 2014 at 12:51

PeterKA

24.7k5 gold badges28 silver badges52 bronze badges

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

7 Comments

Mudders Over a year ago

Thanks! Looks like it was needing filter instead of find. Thanks a lot for the help!

PeterKA Over a year ago

Great! Glad you found this answer helpful. Enjoy!

Mudders Over a year ago

One last question - how would I now output that %html variable to the console - if I do console.log($html.html()); it doesn't return the full html?

PeterKA Over a year ago

The answer is already updated with how to do that: console.log($('<div/>', {html:$html}).html());

PeterKA Over a year ago

So what would be a good reason as to why someone downvotes this answer?

|

Balachandran · Accepted Answer · 2014-12-18 12:57:25Z

0

try

code

$(itemValue).filter("ul").addClass("CLASS_TEST").find("li").addClass("LiClass");

sample

$("div").append($(itemValue).filter("ul").addClass("CLASS_TEST").find("li").addClass("active").end().end());

DEMO

answered Dec 18, 2014 at 12:57

Balachandran

9,6271 gold badge19 silver badges26 bronze badges

Comments

Steven Lacks · Accepted Answer · 2014-12-18 12:58:30Z

You need to assign that text to the DOM object. jQuery('body') should do the trick. (But really you should make a container with an ID $("#container")

var itemValue = '<p>this is a test</p>\n' + 
'<ul>\n' + 
'<li>test1</li>\n' + 
'<li>test2</li>\n' + 
'<li>test3</li>\n' + 
'</ul>\n' + 
'<p>more content</p>\n' + 
'<ol>\n' + 
'<li>number 1</li>\n' + 
'<li>number 2</li>\n' + 
'<li>number 3</li>\n' + 
'</ol>\n' + 
'<p>more content again34234</p>\n' + 
'<ul>\n' + 
'<li>test4</li>\n' + 
'<li>test5</li>\n' + 
'<li>test6</li>\n' + 
'</ul>\n' + 
'<p>&nbsp;</p>';

console.log(itemValue);

// Don't do this.
$("body").html(itemValue);
$("body").find("ul").addClass("class_test");

console.log(itemValue);

See it running live: http://jsfiddle.net/snlacks/1rw1srt9/

What's happening here, is that jquery finds the DOM object, and then replaces it's HTML with your string.

Then we add the class. I changed the case, because the SNAKE_UPPER_CASE_WAS_HURTING_MY_SOUL.

dumle · Accepted Answer · 2014-12-18 13:02:09Z

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>test</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    var html = '<p>this is a test</p>\n' + 
                '<ul>\n' + 
                '  <li>test1</li>\n' + 
                '  <li>test2</li>\n' + 
                '  <li>test3</li>\n' + 
                '</ul>\n' + 
                '<p>more content</p>\n' + 
                '<ol>\n' + 
                '  <li>number 1</li>\n' + 
                '  <li>number 2</li>\n' + 
                '  <li>number 3</li>\n' + 
                '</ol>\n' + 
                '<p>more content again34234</p>\n' + 
                '<ul>\n' + 
                '  <li>test4</li>\n' + 
                '  <li>test5</li>\n' + 
                '  <li>test6</li>\n' + 
                '</ul>\n' + 
                '<p>&nbsp;</p>';

    $("#dummy").append(html);
    console.log(html);

    $("#dummy").find("ul").addClass("CLASS_TEST");

    console.log(html);
});
</script> 
</head>
<body>
<div id="dummy"></div>
</body>
</html>

If you add it to the DOM you can then modify it afterwards...

Matijs · Accepted Answer · 2014-12-18 13:40:34Z

0

If you don't mind wrapping your fragment first, this should work.

var div = $('<div/>', { html: itemValue });
div.find('ul').addClass('CLASS_TEST');
div.find('ol li').addClass('LI_CLASS_TEST'); // just the <li>s inside <ol>s

What you were trying to do was have jQuery do something with something that's just a string whereas jQuery works on jQuery objects.

The above snippet first creates a div element as a jQuery object and then appends your fragment. Append is fine taking a htmlString as an argument.

edited Dec 18, 2014 at 13:40

answered Dec 18, 2014 at 12:53

Matijs

3,1982 gold badges31 silver badges43 bronze badges

Collectives™ on Stack Overflow

Manipulate HTML in Variable with jQuery

5 Answers 5

7 Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

7 Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related