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

Posted 2023-02-22

【中文标题】如何在 JavaScript 中打印整个 HTML 元素？

【英文标题】：how to print entire HTML element in JavaScript?

【发布时间】：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没有定义！

【参考方案1】：

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

【讨论】：

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

【参考方案2】：

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

【讨论】：

参见***.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”测试，我不知道。