JSFiddle - React, Tailwind, and code Playground

HTML

<script>   
function getFooOutput(){
    var domFoo= document.getElementById("foo");
    var s = "domFoo.outerHTML: " + domFoo.outerHTML;
    console.log("domFoo:", domFoo);    
    console.log("s: " , s);    
    $('#ta1').val(s);
    
    var jqFoo= $("#foo").text("i am Foo");        
    console.log("jqFoo:", jqFoo);    
    console.log("jqFoo[0]:", jqFoo[0]);
    $('#ta2').val('jqFoo[0].outerHTML: ' + jqFoo[0].outerHTML);
}
    
function getThis(_this){
    var obj= $(_this);
    console.log("console.log(this): ", obj);
    console.log("outerHTML", obj.context.outerHTML);
    $('#ta').val('obj.context.outerHTML: ' + obj.context.outerHTML);
}
</script>

<h2>Console log of jQuery $(this) for latest chrome version (>23)</h2>
<p> On stackoverflow was a question <a href="http://stackoverflow.com/questions/13268015/console-log-not-outputting-html-of-jquery-selection-object/#13268067">how to get the old output for console.log($foo)</a> for jQuery Objects like it used to be.<br /> 
My first answer was: 
    <ul> 
        <li>you have to use obj.context.outerHTML where obj stands for the jQuery selected object: 
        <li>but now i believe that it depends and you could use jqFoo[0] as well
    </ul>
</p>
<div id="foo">i am foo</div>
<pre>
domFoo = document.getElementById("foo");
jqFoo = $("#foo").text("i am Foo");
</pre>
   
<table>
    <tr><th>chrome version <th>console.log(of x) <th>  expected result </tr>
  <tr><td>22<td> domFoo <td>  &lt;div id=foo&gt;domFoo&lt;div&gt; </tr>           
  <tr><td>22<td> jqFoo[0] <td>  &lt;div id=foo&gt;jqFoo&lt;div&gt; </tr>
  <tr><td>25<td> domFoo <td>  &lt;div id=foo&gt;domFoo&lt;div&gt; </tr>           
  <tr><td>25<td> jqFoo[0] <td>  &lt;div id=foo&gt;jqFoo&lt;div&gt; </tr>            
</table>       
<textarea id="ta1" rows="2" 
    cols="50" 
    placeholder="click button to see console.log(domFoo) output..."></textarea>
        <br />
<textarea id="ta2" rows="2" 
    cols="50" 
    placeholder="click button to see...

CSS

h2{ font-size: 28px; margin-top: 2ex;}
p { margin: 1ex 0 0 0;}
pre, code { margin: 2em;}
th { font-weight: bold;}
th, td { border: 1px solid black; padding: 1ex;}
#foo { padding: 1ex; color: red; font-weight: bold; font-size: 20px;}

    ul, ol { margin: 1em 0 1em 0; }
    ul { list-style: disc outside; margin-left: 30px;}    
    li { line-height: 18px; margin-bottom: 12px; }