Jquery html() issue

Question

I am trying to put the html markup into my array with the following codes

//my htmlData which is entered by user so it could be varies.
<em>test</em> here for the testing purpose
second line <strong>texts</strong> here

I want to store them in my array by using

var data = [];
$(htmlData).contents().each(function(){
           data.push($(this).html().trim());
     }

but I got an error saying Uncaught TypeError: Cannot call method 'trim' of null.

Not sure why $(this).html() would returns a null.

Can anyone help me here? Thanks a lot!

Sushanth -- · Accepted Answer · 2013-07-19 21:48:19Z

1

Should be the issue with the text nodes. As they do not have the innerHTML property Try filtering them out

var data = [];
$(htmlData).contents().each(function(){
     var nodeType = this.nodeType;
     if(nodeType === 1) { // Will only select element nodes
        data.push($.trim($(this).html()));
     } 
     else if(nodeType === 3) {
        data.push($.trim(this.nodeValue));
     }
}

You can use .nodeValue to access the data of th etext node

edited Jul 19, 2013 at 21:48

answered Jul 19, 2013 at 21:37

Sushanth --

55.8k9 gold badges70 silver badges109 bronze badges

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

4 Comments

FlyingCat Over a year ago

thanks but your codes will only keep the markup texts but remove plain texts that users enter. +1

bfavaretto Over a year ago

@FlyingCat Based on this you can push something different (nodeValue or textContent) depending if the node type is element or not.

Sushanth -- Over a year ago

@FlyingCat .. You can use nodeValue to read the content of the text node

FlyingCat Over a year ago

@Sushanth I have a follow up question. Is that possible I can store texts with html markup into data array? what I have now only test but not <em>test</em>

Edney Pitta · Accepted Answer · 2013-07-19 22:27:49Z

1

Assuming that $(htmlData).contents() returns a valid jQuery object, use $.trim($(this).html()) instead of .trim()

answered Jul 19, 2013 at 22:27

Edney Pitta

131 silver badge6 bronze badges

Comments

Pointy · Accepted Answer · 2013-07-19 21:36:50Z

0

Text nodes don't have innerHTML properties.

answered Jul 19, 2013 at 21:36

Pointy

415k62 gold badges600 silver badges632 bronze badges

Collectives™ on Stack Overflow

Jquery html() issue

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related