Почему получение внешнего HTML не работает?

Question

Я пытаюсь получить внешний HTML двумя разными способами, основываясь на этом вопросе . К сожалению, никто из них не дает ожидаемого результата:

HTML:

<div id='my_div'>Hello</div>

JS:

$(function() {
    document.write('[' + $('#my_div').clone().wrapAll("<div />").parent().get(0).innerHTML + ']<br />');
    document.write('[' + (new XMLSerializer().serializeToString(document.getElementById('my_div'))) + ']');
});

Вывод:

[
Hello
]
[
Hello
]

Ожидаю следующий результат: <div id='my_div'>Hello</div>

Живой пример здесь

Что я делаю не так?

Answer 1

Во-первых, ваш первый пример работает нормально .Посмотрите на ваш вывод в Firebug .Обратите внимание, что поскольку ваш вывод является HTML , он отображается как HTML .Обратите внимание, что до и после HELLO ............... есть символы новой строки, потому что HELLO s находятся внутри DIV!

Посмотрите:

---

Второй с jQuery, вы также можете использовать метод в моем ответе на вопрос, который вы связали с :

var outerHTML =  $('<div>').append( $("#my_div").clone() ).html();

jsFiddle пример

Это добавляет клон рассматриваемого элемента к объекту DIV jQuery и получает внутренний HTML-код объекта DIV jQuery .... который является externalHTML рассматриваемого элемента.

Общая форма externalHTML элемента:

$('<div>').append( $(ElementSelector).clone() ).html();

, где ElementSelector - селектор jQuery элемента, которого вы хотите externalHTML.

---

Примечание.нет новых элементов в DOM.$('<div>')...... никогда не добавляется в DOM.Он остается просто объектом jQuery, независимым от DOM.

Answer 2

Вот функция, используемая в lib pure.js для получения externalHTML:

function outerHTML(node){
    return node.outerHTML || new XMLSerializer().serializeToString(node);
}

И для ее использования DOM-способом:

var html = outerHTML(document.getElementById('my_div'));

Answer 3

ОБНОВЛЕНИЕ С ДЕМО

   $(function() {
        var html = $('<div>').append($('#my_div').clone()).html();
        $('body').html( htmlspecialchars( '[' + html + ']' ) );
   });

• Функция htmlspecialchars

Answer 4

Вы можете использовать get для извлечения собственного элемента DOM, а затем использовать outerHTML как:

var html = $('#my_div').get(0).outerHTML;

или

var html = $('#my_div')[0].outerHTML;

Answer 5

попробуйте это:

var result = $('<div></div>').append($('#my_div').clone()).html();
alert(result);