Получить 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> 

Я хочу, чтобы получить внешний HTML в DIV без внутренних детей следующим образом

<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,'') 

Bye