JSFiddle - React, Tailwind, and code Playground

HTML

<div id="target"></div>
<div id="bigger_Target">
    <span style='color:red;'>H</span>
    <span style='color:blue;'>E</span>
    <span style='color:red;'>L</span>
    <span style='color:blue;'>L</span>
    <span style='color:red;'>O</span>
</div>
<table id='result'>
    <tr>
        <td class='title'>Title</td>
        <td class='value'>Value</td>
    </tr>
</table>

CSS

*{
    color:rgb(30,30,30); 
}
#result{
    position:absolute;
    top:50px;
    height:auto;
    min-width:500px;
    width:auto;
    left:0px;
    border:1px solid black;    
}

#result tr:nth-of-type(1) {
    font-weight:bold;   
    background:rgba(0,0,0,0.1);
}
#result td{
    border:1px solid rgba(0,0,0,0.2);
    
}

JavaScript

function eventData(e){
    return {
        'sender': e.srcElement || e.target,
        'event': e || window.event,
    };
};

$(document).ready(function(e){
    var texts = [];
    var $input = $("<input class='test' data-type='text only'/>").attr({'type':'button','value':'Test'});
    $input.appendTo('#target');
    $input.click(function(e) { alert(eventData(e).sender.value); });
    console.log($input[0])
    texts.push({title:'[#target, outerHTML]', value: $input[0].outerHTML});
    texts.push({title:'[#target, $.html()]', value: $input.html()});
    
    texts.push({title:'[#bigger_Target, outerHTML]', value: $('#bigger_Target')[0].outerHTML});
    texts.push({title:'[#bigger_Target, $.html()]', value: $('#bigger_Target').html()});
    
    texts.push({title:'[#target, DESIRED]', value: '<input class="test" data-type="text only" type="button" value="Test />"'});
    texts.push({title:'[#bigger_Target, DESIRED]', value: '<div id="bigger_Target" />'});
    
   
    for(var i = 0; i < texts.length; i++) {
        var row = $('<tr/>').appendTo('#result'),
            title = $('<td class="title"/>').text(texts[i].title).appendTo(row),
            value = $('<td class="value"/>').text(texts[i].value).appendTo(row);
                
    }
    
    //Console is the best way to display a node object;
    //Open your console to see the result;
    console.log($input[0]);
});