javascript - 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!

Answer 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