JSFiddle - React, Tailwind, and code Playground

by Gabriele Petrioli

HTML

<div>
    sample text in div 1
    <ul>
        <li>list item 1 in 1st div</li>
        <li class="list-2">list item 2 in 1st div <strong>(bold text)</strong></li>
    </ul>
</div>
<div> second div here with <em id="emphatic">emphasized <span id="deepest" class="red">with deeper</span></em> text</div>

<div id="xpath"></div>

CSS

strong{font-weight:bold;}
em{font-style:italic;}
li{margin-left:15px;padding-left:5px;list-style:disc}
.red{color:red}

#xpath{font-family:courier;padding:3px;margin-top:10px;}

JavaScript

$(document).delegate('*','mouseenter',function(){
    var path = $(this).parents().andSelf();
    var xpath='/';
    for (var i = 0; i < path.length; i++)
    {
        var nd = path[i].nodeName.toLowerCase();
        xpath += '/';
        if (nd != 'html' && nd != 'body')
        {
            xpath += nd;
            if (path[i].id != '')
            {
                xpath += '#' + path[i].id;
            }
            else
            {
                xpath += '['+ ($(path[i-1]).children().index(path[i])+1) +']';
            }
            if (path[i].className != '') 
                xpath += '.' + path[i].className;
        }
        else
        {xpath += nd;}                    
    }
    $('#xpath').html(xpath);
    return false;
});