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

Question

我想打印整个元素，包括标签名称、属性名称/值对和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未定义！

- celicni

Answer 1

使用一个outerHTML jQuery插件，比如这个或者这个。

- Ben S

---

我做到了(http://dbj.org/dbj/?p=91)，但它看起来效率很低...但我想不出更好的方法，还是这样吧？ - user182669

Answer 2

如果无法执行outerHtml操作，可以克隆它并创建一个新的div容器，然后将克隆体放置在这个div中，并获取容器的innerHTML。

- Yuliy

---

请参考 https://dev59.com/3nNA5IYBdhLWcg3wrf43 以使用 jQuery 创建 div。 :) - Steropes

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

- kennebec

Answer 4

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

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

alert(el[0].outerHTML);

- BlueStory

Answer 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”测试，我不知道。

- Pointy