JSFiddle - React, Tailwind, and code Playground

by austinfrance

HTML

<!-- Test 1 -->
<h1>Test 1</h1>
<div id="test1">
    <div class="w">
        <div class="v">
            <div class="t">
                <div class="lt">Title</div>                        
                <div class="s">
                    <div class="i">
                        <div class="l">1</div>
                        <div class="l">2</div>
                        <div class="l">3</div>
                        <div class="l">4</div>
                        <div class="l">5</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Test 2 -->
<h1>Test 2</h1>
<div id="test2">
    <div class="w">
        <div class="v t">
            <div class="lt">Title</div>                        
            <div class="l">1</div>
            <div class="l">2</div>
            <div class="l">3</div>
            <div class="l">4</div>
            <div class="l">5</div>
        </div>
    </div>
</div>

<!-- Test 3 -->
<h1>Test 3</h1>
<div id="test3">
    <div class="w">
        <div class="v t">
            <div class="l">1</div>
            <div class="l">2</div>
            <div class="l">3</div>
            <div class="l">4</div>
            <div class="l">5</div>
        </div>
    </div>
</div>
<h1>Result 1</h1>
<div id="result1">
</div>
<h1>Result 2</h1>
<div id="result2">
</div>
<h1>Result 3</h1>
<div id="result3">
</div>

JavaScript

result1.innerText 
 = document.querySelectorAll("#test1 .t .l:nth-child(1)")[0].outerHTML;
result2.innerText 
= document.querySelectorAll("#test2 .t .l:first-child, #test2 .t :nth-child(2)")
[0].outerHTML;
result3.innerText 
= document.querySelectorAll("#test3 .t .l:first-child, #test3 .t :nth-child(2)")
[0].outerHTML;