Получить внешний HTML-код выбранного элемента - PullRequest
Новая
       22

Получить внешний HTML-код выбранного элемента

771 голосов
/ 10 марта 2010

Я пытаюсь получить HTML-код выбранного объекта с помощью jQuery. Мне известна функция .html(); проблема в том, что мне нужен HTML, включая выбранный объект (в данном случае строка таблицы, где .html() возвращает только ячейки внутри строки).

Я искал и нашел несколько очень «хакерских» методов клонирования объекта, добавления его во вновь созданный div и т. Д., И т. Д., Но это кажется очень грязным. Есть ли лучший способ, или новая версия jQuery (1.4.2) предлагает какую-либо функциональность outerHtml?

Ответы [ 28 ]

654 голосов
/ 02 мая 2012

Я считаю, что в настоящее время (5/1/2012) все основные браузеры поддерживают функцию externalHTML. Мне кажется, что этого фрагмента достаточно. Я лично хотел бы запомнить это: 

// Gives you the DOM element without the outside wrapper you want
$('.classSelector').html()

// Gives you the outside wrapper as well only for the first element
$('.classSelector')[0].outerHTML

// Gives you the outer HTML for all the selected elements
var html = '';
$('.classSelector').each(function () {
    html += this.outerHTML;
});

//Or if you need a one liner for the previous code
$('.classSelector').get().map(function(v){return v.outerHTML}).join('');

РЕДАКТИРОВАТЬ : Базовая статистика поддержки для element.outerHTML

342 голосов
/ 20 января 2011

Нет необходимости создавать функцию для него. Просто сделай это так: 

$('a').each(function(){
    var s = $(this).clone().wrap('<p>').parent().html();
    console.log(s);
});

(Кстати, в консоли вашего браузера будет отображаться то, что зарегистрировано. Большинство последних браузеров, начиная с 2009 года, имеют эту функцию.)

Волшебство заключается в следующем: 

.clone().wrap('<p>').parent().html();

Клон означает, что вы на самом деле не беспокоите DOM. Запустите его без него, и вы увидите p теги, вставленные до / после всех гиперссылок (в этом примере), что нежелательно. Итак, да, используйте .clone().

Он работает так, что он берет каждый тег a, создает его клон в ОЗУ, оборачивает тегами p, получает его родителя (имеется в виду тег p) и затем получает innerHTML свойство этого.

РЕДАКТИРОВАТЬ : взял совет и изменил теги div на теги p, потому что он меньше печатает и работает так же.

186 голосов
/ 10 марта 2010

2014 Редактировать: вопрос и этот ответ относятся к 2010 году. В то время лучшего решения не было. Теперь многие другие ответы лучше: например, Эрика Ху или Ре Капчи.

Кажется, у этого сайта есть решение для вас: jQuery: outerHTML | Yelotofu 

jQuery.fn.outerHTML = function(s) {
    return s
        ? this.before(s).remove()
        : jQuery("<p>").append(this.eq(0).clone()).html();
};
139 голосов
/ 19 марта 2014

А как же: prop('outerHTML')? 

var outerHTML_text = $('#item-to-be-selected').prop('outerHTML');

И установить: 

$('#item-to-be-selected').prop('outerHTML', outerHTML_text);

Это сработало для меня.

PS : это добавлено в jQuery 1.6 .

89 голосов
/ 15 ноября 2010

Расширение jQuery: 

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

И используйте это так: $("#myTableRow").outerHTML();

42 голосов
/ 10 марта 2011

Я согласен с Арпаном (13 декабря 10:59).

Его способ сделать это - НАМНОГО лучший способ сделать это, так как вы не используете клон. Метод клонирования очень трудоемкий, если у вас есть дочерние элементы, и никто больше не заботился о том, что IE фактически имеет атрибут outerHTML (да, IE действительно имеет НЕКОТОРЫЕ полезные приемы).

Но я бы, вероятно, создал его сценарий немного по-другому: 

$.fn.outerHTML = function() {
    var $t = $(this);
    if ($t[0].outerHTML !== undefined) {
        return $t[0].outerHTML;
    } else {
        var content = $t.wrap('<div/>').parent().html();
        $t.unwrap();
        return content;
    }
};
18 голосов
/ 07 сентября 2011

Чтобы быть действительно jQuery-esque, вы можете захотеть, чтобы outerHTML() был получателем и установщиком и имел бы его поведение, максимально похожее на html(): 

$.fn.outerHTML = function (arg) {
    var ret;

    // If no items in the collection, return
    if (!this.length)
        return typeof arg == "undefined" ? this : null;
    // Getter overload (no argument passed)
    if (!arg) {
        return this[0].outerHTML || 
            (ret = this.wrap('<div>').parent().html(), this.unwrap(), ret);
    }
    // Setter overload
    $.each(this, function (i, el) {
        var fnRet, 
            pass = el,
            inOrOut = el.outerHTML ? "outerHTML" : "innerHTML";

        if (!el.outerHTML)
            el = $(el).wrap('<div>').parent()[0];

        if (jQuery.isFunction(arg)) { 
            if ((fnRet = arg.call(pass, i, el[inOrOut])) !== false)
                el[inOrOut] = fnRet;
        }
        else
            el[inOrOut] = arg;

        if (!el.outerHTML)
            $(el).children().unwrap();
    });

    return this;
}

Рабочая демоверсия: http://jsfiddle.net/AndyE/WLKAa/

Это позволяет нам передавать аргумент outerHTML, который может быть

  • отменяемая функция & mdash; function (index, oldOuterHTML) { } & mdash; где возвращаемое значение станет новым HTML для элемента (если не возвращено false).
  • строка, которая будет установлена ​​вместо HTML каждого элемента.

Для получения дополнительной информации см. Документацию jQuery для html().

15 голосов
/ 23 апреля 2015

Вы также можете использовать get (Получить элементы DOM, соответствующие объекту jQuery.).

например: 

$('div').get(0).outerHTML;//return "<div></div>"

как метод расширения: 

jQuery.fn.outerHTML = function () {
  return this.get().map(function (v) {
    return v.outerHTML
  }).join()
};

Или 

jQuery.fn.outerHTML = function () {
  return $.map(this.get(), function (v) {
    return v.outerHTML
  }).join()
};

Множественный выбор и возврат внешнего html всех соответствующих элементов. 

$('input').outerHTML()

возврат: 

'<input id="input1" type="text"><input id="input2" type="text">'
10 голосов
/ 21 марта 2012

Чтобы сделать полный плагин jQuery как .outerHTML, добавьте следующий скрипт в любой файл js и включите после jQuery в свой заголовок:

обновление Новая версия имеет лучший контроль, а также более дружественный сервис jQuery Selector! :) 

;(function($) {
    $.extend({
        outerHTML: function() {
            var $ele = arguments[0],
                args = Array.prototype.slice.call(arguments, 1)
            if ($ele && !($ele instanceof jQuery) && (typeof $ele == 'string' || $ele instanceof HTMLCollection || $ele instanceof Array)) $ele = $($ele);
            if ($ele.length) {
                if ($ele.length == 1) return $ele[0].outerHTML;
                else return $.map($("div"), function(ele,i) { return ele.outerHTML; });
            }
            throw new Error("Invalid Selector");
        }
    })
    $.fn.extend({
        outerHTML: function() {
            var args = [this];
            if (arguments.length) for (x in arguments) args.push(arguments[x]);
            return $.outerHTML.apply($, args);
        }
    });
})(jQuery);

Это позволит вам не только получить externalHTML одного элемента, но даже получить возврат из массива нескольких элементов одновременно! и может использоваться в обоих стандартных стилях jQuery как таковых: 

$.outerHTML($("#eleID")); // will return outerHTML of that element and is 
// same as
$("#eleID").outerHTML();
// or
$.outerHTML("#eleID");
// or
$.outerHTML(document.getElementById("eleID"));

Для нескольких элементов 

$("#firstEle, .someElesByClassname, tag").outerHTML();

Примеры фрагментов: 

console.log('$.outerHTML($("#eleID"))'+"\t", $.outerHTML($("#eleID"))); 
console.log('$("#eleID").outerHTML()'+"\t\t", $("#eleID").outerHTML());
console.log('$("#firstEle, .someElesByClassname, tag").outerHTML()'+"\t", $("#firstEle, .someElesByClassname, tag").outerHTML());

var checkThisOut = $("div").outerHTML();
console.log('var checkThisOut = $("div").outerHTML();'+"\t\t", checkThisOut);
$.each(checkThisOut, function(i, str){ $("div").eq(i).text("My outerHTML Was: " + str); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://rawgit.com/JDMcKinstry/ce699e82c7e07d02bae82e642fb4275f/raw/deabd0663adf0d12f389ddc03786468af4033ad2/jQuery.outerHTML.js"></script>
<div id="eleID">This will</div>
<div id="firstEle">be Replaced</div>
<div class="someElesByClassname">At RunTime</div>
<h3><tag>Open Console to see results</tag></h3>
9 голосов
/ 18 ноября 2011

Вы также можете просто сделать это так 

document.getElementById(id).outerHTML

где id - это идентификатор элемента, который вы ищете

Страница:
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...