Why getting an outer HTML does not work?

First, your first example works fine. Take a look at your output in Firebug. Note, that since your output is HTML it is rendered as HTML. Note that there are newlines before and after the HELLO............... because the HELLOs are inside DIVs!

Take a look:

---

Second w/ jQuery, you could also use the method in my answer to the question you linked to:

var outerHTML =  $('<div>').append( $("#my_div").clone() ).html();

jsFiddle example

This appends a clone of the element in question to a DIV jQuery object and gets the inner HTML of the DIV jQuery object.... which is the outerHTML of the element in question.

The general form of the outerHTML of an element is:

$('<div>').append( $(ElementSelector).clone() ).html();

where ElementSelector is the jQuery selector of the element whose outerHTML you want.

---

Note: The above adds no new elements to the DOM. $('<div>')...... is never added to the DOM. It remains merely jQuery object independent of the DOM.

Here is a function used in the lib pure.js to get the outerHTML:

function outerHTML(node){
    return node.outerHTML || new XMLSerializer().serializeToString(node);
}

And to use it the DOM way:

var html = outerHTML(document.getElementById('my_div'));

UPDATE With DEMO

   $(function() {
        var html = $('<div>').append($('#my_div').clone()).html();
        $('body').html( htmlspecialchars( '[' + html + ']' ) );
   });

• htmlspecialchars function