JSFiddle - React, Tailwind, and code Playground

by billjohnston4

HTML

<div id='id1'>remove</div>
<div id='id2'>replace</div>
<div id='id3'>update</div>
<div id='id4'>update</div>
<div id='id5'>hide</div>

CSS

.hide{display:none}

JavaScript

$(function(){
    update_dom({
        update_dom:{
            replaceWith:{container: '#id2', content: '<div><strong>test<strong></div>'},
            remove:[{container: '#id1'},{container: '#id4'}],
            html: {container: '#id3', content: 'poop'},
            append: {container: '#id3', content: '<div><em>appended</em></div>'},
            prepend: {container: '#id3', content: '<div><em>prepend</em></div>'},
            toggleClass: {container: '#id5', content: 'hide'}
        }
    });
    function update_dom(result){
        $.each(result.update_dom, function(update_type, array_or_object){
            if(array_or_object instanceof Array){
                $.each(array_or_object, function(index, object){
                    $(object.container)[update_type](object.content);
                });
            }
            else{
                $(array_or_object.container)[update_type](array_or_object.content);
            }
        });
    };
});