Question

I’ve been having this weird issue with jQuery which came with WordPress 3.2.1. I’m developing a WordPress plugin. I’m using Chrome to do my debugging. I would normally turn on the developer tools to try out some jQuery function before putting them into the code. But for this particular combination, I have had problem with namely the ID selector and various HTML Object function.

jQuery('#id_of_html_element') //This will just return [] in the console

//If I put this in the plugin, it will run and show [object Object]
alert(jQuery('#id_of_html_element'));


//The following shows "null" but in fact I have html inside
alert(jQuery('#id_of_html_element').html());

//And this works as expected in the console
document.getElementById('id_of_html_element').innerHTML

I’ve tried disabling all extension on my Chrome, but the problem remains. On another page (e.g. Stackoverflow.com), jQuery works as expected in the console.

EDIT: Class selector does works properly in the console but html() still returns null

EDIT: Sorry, it was my mistake. I had a “-” in the id, which causes the problem. After replacing it with underscore, it works already. I notice it when it works on other wordpress plugin, but not mine.

Answer 1

If really want to access to html code inside element ID, try my solution:

var v1 = $('<div>').append($("#id_of_html_element").find("*").clone()).remove().html();
alert(v1);

I tested that on :

<div id="id_of_html_element">
        <a href="#">Text</a>
        <br/><a href="#">Another Text</a>
</div>

and the alert result was :

<a href="#">Text</a><br><a href="#">Another Text</a>

I tested that on FF, Chrome and that thing called IE, and everything seemed working well !

Don’t ask me about white-spaces where they gone, its your problem now 😛 😛 😛

Hopefully that helpful for you 🙂