如何在 JavaScript 中打印整个 HTML 元素？答案

【问题标题】：how to print entire HTML element in JavaScript?如何在 JavaScript 中打印整个 HTML 元素？
【发布时间】：2011-02-07 12:43:25
【问题描述】：

我想打印整个元素，包括标签名、属性名/值对和innerHTML。如何在 JavaScript (jQuery) 中做到这一点？

例如：

var elArr = document.getElementsByTagName('link');
alert(elArr[0].printEntireElement());

//expected output might be 
<link href="/css/common.css" rel="stylesheet" type="text/css">`

注意对于链接元素outerHTML没有定义！

【问题讨论】：

标签： javascript

【解决方案1】：

使用外部HTML jQuery 插件，例如this one 或this one。

【讨论】：

该死，我做到了 (dbj.org/dbj/?p=91) 但它似乎效率低下……但我还是想不出更好的方法？

【解决方案2】：

如果不能做outerHtml，克隆它，新建一个div，把克隆放到div中，抓取容器的innerHTML。

【讨论】：

参见stackoverflow.com/questions/867916/… 在 jquery 中创建一个 div。 :)

【解决方案3】：

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');
}

【讨论】：

【解决方案4】：

如果你想从一个 jQuery 元素打印整个标签，你可以这样做：

var el = $('<div id="my_div">test div 123</div>');

alert(el[0].outerHTML);

【讨论】：

【解决方案5】：

你可以这样做：

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'));
}

你是否想要“hasOwnProperty”测试，我不知道。

【讨论】：