JSFiddle - React, Tailwind, and code Playground

by gonchuki

HTML

<div id="foo"></div>
<div id="result"></div>

JavaScript

var a = $('<div/>').text('-a-'),
    b = $('<div/>').text('-b-'),
    c = $('<div/>').text('-c-'),
    d = $('<div/>').text('-d-'),
    foo = $('#foo'),
    result = $('#result');

setTimeout(function() {
    foo.empty().append(a[0]);
    result.append('<p>successfully appended unwrapped a</p>');
    
setTimeout(function() {
    foo.empty().append(a);
    result.append('<p>successfully appended wrapped a</p>');
    
setTimeout(function() {    
    foo.empty().append(a[0], b[0]);
    result.append('<p>successfully appended unwrapped a and b</p>');
        
setTimeout(function() {
    foo.empty().append(a, b);
    result.append('<p>successfully appended wrapped a and b</p>');
        
setTimeout(function() {
    foo.empty().append(a[0], b[0], c[0]);
    result.append('<p>successfully appended unwrapped a, b and c</p>');
                
setTimeout(function() {
    foo.empty().append(a, b, c);
    result.append('<p>successfully appended wrapped a, b and c</p>');
                    
setTimeout(function() {
    foo.empty().append(a[0], b[0], c[0], d[0]);
    result.append('<p>successfully appended unwrapped a, b, c and d</p>');

setTimeout(function() {
    foo.empty().append(a, b, c, d);
    result.append('<p>successfully appended wrapped a, b, c and d</p>');
}, 500);
}, 500);
}, 500);
}, 500);
}, 500);
}, 500);
}, 500);
}, 500);