Question

是否可以通过dom api获取节点的顶级标记html？要清楚，如果我有

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

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

在outerHTML上匹配的原始字符串是我能做的最好的，还是有快速直接的方法来实现我想要的？

Answer 1

如果克隆节点，则innerHTML属性将为空。对于您的示例，浅克隆是合适的（通过false或不通过任何东西）。

＆＃13;

// 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

＆＃13;

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

＆＃13;

.cloneNode() on MDN

Answer 2

你可以使用outerHTML获取所有内容，使用innerHTML来获取内部的东西。然后在outerHTML上执行字符串替换，将innerHTML替换为空字符串，并对结束标记执行相同操作。

获取元素的html标记内容

2 个答案: