javascript - 获取元素的html标签内容

Question

是否可以通过dom api获取节点的顶级标签html？明确地说，如果我有

<div data-x="a">
    <span>Hello</span>
</div>

我只想回去<div data-x="a">

我能做的最好的是在 outerHTML 上进行粗略的字符串匹配，还是有一种快速直接的方法来实现我想要的？

Answer 1

如果克隆节点，innerHTML 属性将为空。对于您的示例，浅克隆是合适的(传递 false 或不传递任何内容)。

// get the div element
var element = document.querySelectorAll('div')[0];

// view the outerHTML of the element
console.log('original outerHTML', element.outerHTML);

// clone the element
var clone = element.cloneNode();

// view the outerHTML of the clone
console.log('outerHTML of clone', clone.outerHTML); // has what you want

<div data-x="a">
    <span>Hello</span>
</div>

.cloneNode() on MDN