JSFiddle - React, Tailwind, and code Playground

by ihope

HTML

<html>
    <head>
        <script> function init() {
    injectCSS();
            }</script>
    </head>
    <body onload="init()">
        <div class="">
            <ul class="">
                <li> dddd </li>
            </ul>
        </div>
    </body>
</html>

JavaScript

function injectCSS () {
    var s = document.createElement('link');
    s.setAttribute('href', 'http://twitter.github.com/bootstrap/1.3.0/bootstrap.css');
    s.setAttribute('rel', 'stylesheet');
    s.setAttribute('type', 'text/css');
    document.getElementsByTagName('head')[0].appendChild(s);
    console.log('Stylesheet injected!');
}

var path;
document.documentElement.getElementsByTagName('body')[0].onclick = function(e) {
    var node = e.target;

    var s = "";
    while (node.parentNode) {
        var Ind = 1;
        prevSibling = node;
        while (prevSibling.previousElementSibling && prevSibling.previousElementSibling.tagName == prevSibling.tagName) {
            Ind += 1;
            prevSibling = prevSibling.previousElementSibling
        };
        var attributesSelector = [];
        if (node.className) {
            attributesSelector.push("@class='" + node.className + "'");
        }
        if (node.id) {
            attributesSelector.push("@id='" + node.id + "'");
        }
        if (Ind > 1) {
            attributesSelector.push(Ind);
        }
        attributesSelector = attributesSelector.length ? "[" + attributesSelector.join(" and ") + "]" : "";
        s += node.tagName + attributesSelector + "\\";
        node = node.parentNode
    };

    path = s.split("\\").reverse().join("/");
    console.log(path);
}