Bookmarklet for showing SVG icons existing on page

show-icons.js

javascript:void(function(){ var doc = document; var body = doc.querySelector("body"); var head = doc.querySelector("head"); var icons = ""; var resultElem = doc.querySelector("#icons-shower"); if ( !resultElem ) { var styleElem = doc.createElement("style"); styleElem.setAttribute("id", "icons-styles"); styleElem.innerHTML += "UL {padding: 0;} LI {list-style: none;}"; styleElem.innerHTML += "#icons-shower {position: absolute; z-index: 5010; top: 0; right: 0; width: 500px; padding: 30px; background: white; border: 1px solid #DDD; box-shadow: 0 0 5px rgba(0,0,0,.5)}"; styleElem.innerHTML += ".icons-list__item {padding: 1em 0; border-bottom: 1px solid #DDD;}"; styleElem.innerHTML += ".icons-list__title {display: inline-block;  margin: 0;}"; styleElem.innerHTML += ".svg-icon { float: right; width: 2em; height: 2em;}"; styleElem.innerHTML += ".icons-shower__title {margin-bottom: 1.5em}"; styleElem.innerHTML += ".icons-shower__close {float: right; cursor: pointer; font-size: 3em; line-height: 1;}"; head.appendChild(styleElem); resultElem = doc.createElement("div"); resultElem.setAttribute("id", "icons-shower"); body.appendChild(resultElem); resultCloseElem = doc.createElement("span"); resultCloseElem.classList.add("icons-shower__close"); resultCloseElem.innerHTML = "&times"; resultElem.appendChild(resultCloseElem); resultCloseElem.onclick = function(){ resultElem.parentNode.removeChild(resultElem); }; resultContentElem = doc.createElement("div"); resultContentElem.setAttribute("id", "icons-result"); resultElem.appendChild(resultContentElem); } var symbols = doc.querySelectorAll("symbol"); if ( symbols.length == 0 ) { resultContentElem.innerHTML = "<i>There is no symbols.</i>"; } else { for (var i = 0; i< symbols.length; i++){ var svg_id = symbols[i].getAttribute("id"); icons += "<li class=\"icons-list__item\"><h5 class=\"icons-list__title\">#" + svg_id + "</h5><svg class=\"svg-icon\"><use xlink:href=\"#" + svg_id + "\"></svg></li>"; } resultContentElem.innerHTML = "<h4 class=\"icons-shower__title\">Symbols on page:</h4>"; resultContentElem.innerHTML += "<ul class=\"icons-list\">" + icons + "</ul>";    }})();