I want to print the entire element including tag name, attribute name/value pairs and innerHTML. How can I do it in JavaScript (jQuery)?
for example:
var elArr = document.getElementsByTagName('link');
alert(elArr[0].printEntireElement());
//expected output might be
<link href="/css/common.css" rel="stylesheet" type="text/css">`
Note that for link element outerHTML is not defined!
If you can't do outerHtml, clone it, create a new div, place the clone in the div, and grab the innerHTML of the container.
document.getHTML= function(who){
var txt, ax, el= document.createElement("div");
el.appendChild(who.cloneNode(false));
txt= el.innerHTML;
ax= txt.indexOf('>')+1;
txt= txt.substring(0, ax)+who.innerHTML+ txt.substring(ax);
el= null;
return txt.replace(/>/g,'>\n');
}
If you want to print an entire tag from a jQuery element you could do something like this:
var el = $('<div id="my_div">test div 123</div>');
alert(el[0].outerHTML);
you can do something like this:
function dump(element) {
var a = ["Element dump:"];
for (var k in element) {
if (element.hasOwnProperty(k)) {
a.push(k + ": " + element[k]);
}
}
a.push("HTML: " + element.innerHTML);
alert(a.join('\n'));
}
Whether you want the "hasOwnProperty" test or not, I don't know.
