Как получить разметку элемента, включая его самого с помощью jQuery?

Я знаю, что могу завернуть его .html () в теге, но сам элемент имеет динамически заданный id, класс и т. д. Как заставить jQuery вернуть разметку элемента, включая его самого?

6
dom jquery

6 ответов

насколько я знаю, в jQuery нет поддержки" outerHTML", но вы можете написать функцию для ее эмуляции (в браузерах, отличных от IE) или использовать плагин:

// this will return the element and it's mark-up, of an element
// with the id myTag
var outer = $('#myTag').outerHTML();

очевидно, что Брэндон-не единственная реализация.. Я уверен, что вы также можете придумать другие умные реализации..

редактировать

Если вы хотите избежать вызовов для добавления, возможно, вы могли бы попробовать что - то вроде этот..

function getOuterHTML(el)
{   
    var wrapper = '';

    if(el)
    {
        var inner = el.innerHTML;
        var wrapper = '<' + el.tagName;

        for( var i = 0; i < el.attributes.length; i++ )
        {
            wrapper += ' ' + el.attributes[i].nodeName + '="';
            wrapper += el.attributes[i].nodeValue + '"';
        }
        wrapper += '>' + inner + '</' + el.tagName + '>';
    }
    return wrapper;
}


// now, to replicate the sample above
var outer = getOuterHTML($('#myTag'));

единственное, я не уверен, что все браузеры поддерживают различными атрибутами.. но я знаю, что mozilla-семейство делает, и IE имеет встроенную поддержку outerHTML.. попробуйте (для тех, кто не поддерживает массив атрибутов, вы можете использовать предыдущий метод, который использует добавления)

9

Это будет работать так:

jQuery.fn.outer = function() {
    return $($('<div></div>').html(this.clone())).html();
}
14

Uhm, вам не нужно использовать плагин, я уверен, что вы можете попробовать

// this uses the jquery selectors, then returns the DOM element, 
// which then u can use the standard outterHTML...
$('#myelement').get(0).outerHTML;

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

4

этот блог может помочь вам.

Он описывает технику, которая выглядит так:

var html = $('<div>').append($('#top').clone()).remove().html()

это клонирует интересующий div, добавляет его к div-оболочке, а затем получает html - код оболочки, который приравнивается к исходному html первого div.

его предложение просто окружить его изначально в объявленной оболочке div кажется лучшим способом пойти. Тогда тебе не придется беспокоиться обо всем этом.

2

без какого-либо кода выберите элемент, выберите первый внутренний элемент, получите его Родительский (тот, который вы хотите), затем оберните его вокруг исходного выбора из youElement.формат HTML.)(

0

немного поздно для этого вопроса. Если вы используете jQuery для поиска объекта, вы можете использовать следующий код для получения outerHTML.

HTML:

<div class="obj">
    <a href="#" class="link">Link</a>
</div>

jQuery:

var $obj = $('.obj .link');
var outerHTML = $obj[0].outerHTML;

это выведет <a href="#" class="link">Link</a>. Протестировано на последних Chrome, последних Firefox и IE11. Вот ссылка на codepen:http://codepen.io/aj372/pen/ZLmYbj

0