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>
<code id="asHTML"></code>

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('[#target, outerHTML]' + $input[0].outerHTML);
    texts.push('[#target, $.html()]' + $input.html());
    
    texts.push('[#bigger_Target, outerHTML]' + $('#bigger_Target')[0].outerHTML);
    texts.push('[#bigger_Target, $.html()]' + $('#bigger_Target').html());
    
    texts.push('[#target, DESIRED]' + '<input class="test" data-type="text only" type="button" value="Test />"');
    texts.push('[#bigger_Target, DESIRED]' + '<div id="bigger_Target" />');
    for(var i = 0; i < texts.length; i++){
        var textcontainer = document.getElementById('asHTML');
        textcontainer.innerText += texts[i];
        textcontainer.innerHTML += '<br/><br/>';
    }
    
    //Console is the best way to display a node object;
    //Open your console to see the result;
    console.log($input[0]);
});