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)

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

要获得没有任何子项的元素，请尝试获取整个html并删除所有子项：

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

再见

获取外部元素的html

3 个答案: