JSFiddle - React, Tailwind, and code Playground

by Ahmad Baktash Hayeri

HTML

<div class="container"></div>

CSS

.container{
    text-align:center;
    width:100%;
    background: gray;
}

.container:after{
    display:block;
    padding-bottom: 2rem;
    clear:both;
}

.child{
    width:100%;
    background: red;
    display:block;
}

.subchild{
    width:100%;
    display:block;
}
.replacement{
    width:100%;
    display:block;
}

JavaScript

$(function(){
    var child = '<div class="child"></div>';
    var subchild = '<div class="subchild">Subchild</div>';
    var replacement = '<div class="replacement">Replacement</div>';
    
    //var appended = $(subchild).appendTo(child);
    var appended = $(child).append(subchild);
    
    console.log(appended);
    $('.container').append(appended);
    
    console.log($(appended).find('.subchild').eq(0));
    
    //this will affect the previous append call
    $(appended).find('.subchild').eq(0).replaceWith(replacement);
});