获取外部元素的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

不实际影响页面（即实际上删除所有子代）的最简单方法是克隆DOM节点 ：

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

演示（请参阅控制台）

Answer 2

可能是更好的方法..但是您可以做到这一点

var node = features.cloneNode(); // clone your element
node.innerHTML = ''; // empty the cloned version
console.log(node.outerHTML); // ouput

http://jsfiddle.net/gtzzrfnL/

Answer 3

要仅获取没有任何子元素的元素，请尝试获取Whole html并删除所有子元素：

$('#features')[0].outerHTML.replace( $('#features')[0].innerHTML,'')

再见