[jquery] 선택한 요소의 외부 HTML 가져 오기

Program / 글쓴이

jQuery를 사용하여 선택한 객체의 HTML을 가져 오려고합니다. 나는 알고있다.html() 기능을 . 문제는 선택한 객체 (이 경우 테이블 행 .html(), 행 내부의 셀만 반환)를 포함하는 HTML이 필요하다는 것 입니다.

나는 주변을 탐색하고 객체를 복제하고 새로 생성 된 div 등에 추가하는 매우 ‘해키’한 몇 가지 방법을 찾았지만 실제로는 더러워 보입니다. 더 나은 방법이 있습니까, 아니면 새로운 버전의 jQuery (1.4.2)가 어떤 종류의 outerHtml기능을 제공합니까?

답변

2014 년 편집 : 질문과 답변은 2010 년입니다. 당시에는 더 나은 솔루션이 널리 보급되지 않았습니다. 이제 Eric Hu 또는 Re Capcha와 같은 다른 많은 답변이 더 좋습니다.

이 사이트는 당신을위한 해결책을 가지고있는 것 같습니다 :
jQuery : outerHTML | 옐로 토푸

jQuery.fn.outerHTML = function(s) {
    return s
        ? this.before(s).remove()
        : jQuery("<p>").append(this.eq(0).clone()).html();
};

답변

나는 현재 (2012 년 5 월 1 일) 모든 주요 브라우저가 outerHTML 기능을 지원한다고 생각합니다. 이 스 니펫이 충분하다고 생각됩니다. 나는 개인적으로 이것을 암기하기로 결정했다.

// 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

답변

함수를 생성 할 필요가 없습니다. 다음과 같이하십시오.

$('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가져 와서 RAM에 복제하고, 태그로 랩핑하고, 태그의 상위를 가져오고 ( p태그를 의미 ) 태그의 innerHTML속성 을 얻는 것입니다.

편집 : 타이핑이 적고 동일하게 작동하므로 조언을 얻었고 div태그를 p태그로 변경 했습니다.

답변

무엇에 대해 : prop('outerHTML')?

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

그리고 설정 :

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

그것은 나를 위해 일했다.

추신 : 이것은 jQuery 1.6에 추가되었습니다 .

답변

jQuery 확장 :

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

그리고 이것을 다음과 같이 사용하십시오 : $("#myTableRow").outerHTML();

답변

Arpan에 동의합니다 (Dec 13 ’10 5:59).

그의 방법은 실제로 복제를 사용하지 않기 때문에 실제로 훨씬 더 나은 방법입니다. 자식 요소가있는 경우 clone 메소드는 시간이 많이 걸리며 아무도 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;
    }
};

답변

정말 jQuery와 동일하기를 원할 수도 있습니다. outerHTML() 와 동일 하기 위해 getter 및 setter가 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수 있습니다.

  • cancellable 함수 — function (index, oldOuterHTML) { }— 반환 값이 요소의 새 HTML이되는 경우 (여기서는 제외)false 이됩니다 (반환 ).
  • 각 요소의 HTML 대신 설정되는 문자열

자세한 내용은에 대한 jQuery 문서를 참조하십시오 html().