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

• Firefox (Gecko) : 11 .... 출시 2012-03-13
• 크롬 : 0.2 ...... 2008-09-02 출시
• Internet Explorer 4.0 ... 1997 출시
• Opera 7 ...................... 출시 2003-01-28
• Safari 1.3 ................... 출시 2006-01-12

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

$('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().

get 을 사용할 수도 있습니다 (jQuery 객체와 일치하는 DOM 요소 검색)을 .

예 :

$('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">'

FULL 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);

이렇게하면 한 요소의 outerHTML을 얻을 수있을뿐만 아니라 한 번에 여러 요소의 Array 반환을 얻을 수 있습니다! 다음과 같이 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>

당신은 또한 이런 식으로 할 수 있습니다

document.getElementById(id).outerHTML

여기서 id는 찾고자하는 요소의 id입니다.

Jessica의 솔루션 (Josh가 편집 한)을 사용하여 Firefox에서 outerHTML을 작동시킵니다. 그러나 문제는 그녀의 솔루션이 요소를 DIV에 래핑했기 때문에 코드가 깨 졌다는 것입니다. 한 줄 이상의 코드를 추가하면 문제가 해결되었습니다.

다음 코드는 DOM 트리를 변경하지 않고 outerHTML을 제공합니다.

$jq.fn.outerHTML = function() {
    if ($jq(this).attr('outerHTML'))
        return $jq(this).attr('outerHTML');
    else
    {
    var content = $jq(this).wrap('<div></div>').parent().html();
        $jq(this).unwrap();
        return content;
    }
}

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

누군가가 유용하다고 생각하기를 바랍니다!

// no cloning necessary    
var x = $('#xxx').wrapAll('<div></div>').parent().html(); 
alert(x);

여기에 바이올린 : http://jsfiddle.net/ezmilhouse/Mv76a/

시나리오가 새 행을 동적으로 추가하는 경우 다음을 사용할 수 있습니다.

var row = $(".myRow").last().clone();
$(".myRow").last().after(row);

.myrow의 클래스 이름입니다 <tr>. 마지막 행의 복사본을 만들어 새로운 마지막 행으로 삽입합니다. 이 방법은 IE7 에서도 작동 하지만 [0].outerHTML메소드는 ie7 에서 할당을 허용하지 않습니다.

node.cloneNode ()는 거의 해킹처럼 보이지 않습니다. 노드를 복제하여 원하는 상위 요소에 추가하고 정규 표현식을 실행하거나 DOM에 추가 한 후 개별 속성을 조작하여 노드를 조작 할 수 있습니다.

즉, 요소의 속성을 반복 하여 HTML 문자열 표현을 구성 할 수도 있습니다. jQuery를 사용하여 outerHTML 함수를 구현하는 방법 일 것입니다.

Jessica가 업데이트 한 Volomike의 솔루션을 사용했습니다. 요소가 존재하는지 확인하기 위해 검사를 추가하고 존재하지 않는 경우 공백으로 반환했습니다.

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

물론 다음과 같이 사용하십시오.

$('table#buttons').outerHTML();

https://github.com/darlesson/jquery-outerhtml 에서 좋은 .outerHTML () 옵션을 찾을 수 있습니다 .

요소의 HTML 내용 만 반환하는 .html ()과 달리이 .outerHTML () 버전은 선택한 요소와 해당 HTML 내용을 반환하거나 .replaceWith () 메서드로 대체하지만 대체 HTML을 상속 할 수있는 차이점이 있습니다. 연쇄.

위의 URL에서 예제를 볼 수도 있습니다.

Josh의 솔루션은 단일 요소에 대해서만 작동합니다.

아마도 "외부"HTML은 단일 요소가있을 때만 의미가 있지만 HTML 요소 목록을 가져 와서 마크 업으로 만드는 것이 적합한 상황이 있습니다.

Josh의 솔루션을 확장하면 여러 요소를 처리합니다.

(function($) {
  $.fn.outerHTML = function() {
    var $this = $(this);
    if ($this.length>1)
      return $.map($this, function(el){ return $(el).outerHTML(); }).join('');
    return $this.clone().wrap('<div/>').parent().html();
  }
})(jQuery);

편집 : Josh의 솔루션이 수정 된 또 다른 문제는 위의 주석을 참조하십시오.

remove()임시 DOM 객체 가 추가 된 유사한 솔루션 .

outerHTML은 tokimon 솔루션 (복제 제외)이고 outerHTML2는 jessica 솔루션 (복제) 으로이 간단한 테스트를 수행했습니다.

console.time("outerHTML");
for(i=0;i<1000;i++)
 {                 
  var html = $("<span style='padding:50px; margin:50px; display:block'><input type='text' title='test' /></span>").outerHTML();
 }                 
console.timeEnd("outerHTML");

console.time("outerHTML2");

 for(i=0;i<1000;i++)
 {                 
   var html = $("<span style='padding:50px; margin:50px; display:block'><input type='text' title='test' /></span>").outerHTML2();
  }                 
  console.timeEnd("outerHTML2");

내 크롬 (버전 20.0.1132.57 (0)) 브라우저의 결과는

outerHTML : 81ms
outerHTML2 : 439ms

그러나 네이티브 outerHTML 함수없이 tokimon 솔루션을 사용하는 경우 (현재 거의 모든 브라우저에서 지원됨)

우리는 얻는다

outerHTML : 594ms
outerHTML2 : 332ms

실제 예제에는 더 많은 루프와 요소가 있으므로 완벽한 조합은

$.fn.outerHTML = function() 
{
  $t = $(this);
  if( "outerHTML" in $t[0] ) return $t[0].outerHTML; 
  else return $t.clone().wrap('<p>').parent().html(); 
}

따라서 클론 방법은 실제로 랩 / 언랩 방법보다 빠릅니다
(jquery 1.7.2)

다음은 매우 최적화 된 outerHTML에 플러그인에 대한 jQuery ( http://jsperf.com/outerhtml-vs-jquery-clone-hack/5 => 2 명 등 빠른 코드 조각은 <11 FF와 같은 일부 브라우저와 호환되지 않습니다)

(function($) {

  var DIV = document.createElement("div"),
      outerHTML;

  if ('outerHTML' in DIV) {
    outerHTML = function(node) {
      return node.outerHTML;
    };
  } else {
    outerHTML = function(node) {
      var div = DIV.cloneNode();
      div.appendChild(node.cloneNode(true));
      return div.innerHTML;
    };
  }

  $.fn.outerHTML = function() {
    return this.length ? outerHTML(this[0]) : void(0);
  };

})(jQuery);

@Andy E => 동의하지 않습니다. outerHMTL은 getter와 setter가 필요하지 않습니다 : jQuery는 이미 'replaceWith'를 제공합니다 ...

@mindplay => 왜 모든 outerHTML에 참여하고 있습니까? jquery.html은 FIRST 요소의 HTML 내용 만 반환합니다.

(죄송합니다. 댓글을 작성하기에 평판이 충분하지 않습니다.)

짧고 달다.

[].reduce($('.x'), function(i,v) {return i+v.outerHTML}, '')

또는 화살표 기능의 도움으로 더 달콤한 이벤트

[].reduce.call($('.x'), (i,v) => i+v.outerHTML, '')

또는 jQuery가 전혀없는

[].reduce.call(document.querySelectorAll('.x'), (i,v) => i+v.outerHTML, '')

또는이 방법이 마음에 들지 않으면

$('.x').get().reduce((i,v) => i+v.outerHTML, '')

이것은 바닐라 JavaScript로 매우 간단합니다 ...

document.querySelector('#selector')

이것은 dom의 요소를 변경하는 데 좋지만 다음과 같이 html 문자열을 jquery로 전달할 때 작동하지 않습니다.

$('<div id="foo">Some <span id="blog">content</span></div>').find('#blog').outerHTML();

일부 조작 후 위의 내용을 html 문자열에서 사용할 수있는 함수를 만들었습니다.

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

$.html = el => $("<div>"+el+"</div>").html().trim();

내 문제에 대한 답을 찾고있는 동안이 문제가 발생했습니다. 테이블 행을 제거하고 테이블 맨 아래에 다시 추가하려고했습니다 (동적으로 데이터 행을 생성했지만 'Add New' 하단의 레코드 유형 행).

innerHtml을 반환하고 TR 태그가 누락되어 해당 행의 ID를 보유하고 절차를 반복하는 것이 불가능하다는 의미에서 동일한 문제가있었습니다.

내가 찾은 대답은 jquery remove()함수가 실제로 요소를 객체로 반환한다는 것입니다. 따라서 행을 제거하고 다시 추가하는 것이 이렇게 간단했습니다 ...

var a = $("#trRowToRemove").remove();            
$('#tblMyTable').append(a);  

객체를 제거하지 않고 다른 곳에 복사하려면 clone()대신 함수를 사용하십시오 .

전체 요소 HTML을 직접 가져 오는 속기로서 jQuery 플러그인 :

jQuery.fn.outerHTML = function () {
    return jQuery('<div />').append(this.eq(0).clone()).html();
};

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

$("#myNode").parent(x).html(); 

여기서 'x'는 첫 번째 노드로 0으로 시작하는 노드 번호이며 특정 노드를 얻으려는 경우 원하는 노드를 가져와야합니다. 자식 노드가 있다면 실제로 원하는 노드에 ID를 입력해야합니다. 그 방법론을 사용하고 'x'는 잘 작동하지 않았습니다.

간단한 해결책.

var myself = $('#div').children().parent();

$("#myTable").parent().html();

아마도 귀하의 질문을 올바르게 이해하지 못하지만 선택한 요소의 부모 요소의 html이 표시됩니다.

그게 당신이 무엇을하고 있습니까?