Question

<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script>
var newvalue = '<img class="youtube_replace youtube_canvas" data-code="Wn-_MyJV37E" src="http://img.youtube.com/vi/Wn-_MyJV37E/0.jpg" />';

var abc = $('<div>' + newvalue + '</div>').find('*').each(function() {
}).html();

alert(abc);

</script>

I want abc to equal “newvalue”. But in my current code, abc is empty. Why?

This is what I truly want to do, but for example purposes, I left this blank above:

var whitelist = ['a','div','img', 'span'];
var abc = $('<div>' + newvalue + '</div>').find('*').each(function() {
    if($.inArray(this.nodeName.toLowerCase(), whitelist)==-1) {
        $(this).remove();
     }
}).html(); //abc is now sanitized!!!

Answer 1

Breaking it down:

var abc = $('<div>' + newvalue + '</div>') //Creates a div with an img element inside it
         .find('*')   //retrieves the img element
         .each(function() {}) //iterates over the jQuery set (only one img element)
         .html();  //returns the HTML serialization of the img element
                   //which has no contents, so it is an empty string

You could call .parent().html(), which would retrieve the contents of the div you created.

In your second example, you would want .end().html() which would pop the internal jQuery stack and get you back to the top-most div.