javascript - 获取外部元素的html

Question

我的元素如下

 <div id="features" class="feature" data-id="1">
   <a href="http://www.google.com></a>
   <img src="/sample.jpg">
   <p> Sample content </p>
 </div>

我想获取没有内部子元素的 div 的外部 html，如下

  <div id="features" class="feature" data-id="1"></div>

如果没有jquery，我该如何做到这一点？

Answer 1

不实际影响页面(即实际删除所有子级)的最简单方法是 clone the DOM node :

var featuresEl = document.getElementById('features');
var clonedEl = featuresEl.cloneNode(false); //False to not clone children
console.log(clonedEl.outerHTML); //Returns what you wanted, without inners

<强> Demo (see console)