복붙노트

[JQUERY] 요소의 외부 HTML을 선택하기

JQUERY

요소의 외부 HTML을 선택하기

해결법


  1. 1.2014 편집 : 질문이 응답은 당시 2010 년부터이며, 더 나은 솔루션을 광범위하게 사용할 수 없었다. 에릭 후 주석의를, 또는 다시 Capcha의 예를 들면 : 자, 다른 응답의 대부분은 더 낫다.

    2014 편집 : 질문이 응답은 당시 2010 년부터이며, 더 나은 솔루션을 광범위하게 사용할 수 없었다. 에릭 후 주석의를, 또는 다시 Capcha의 예를 들면 : 자, 다른 응답의 대부분은 더 낫다.

    이 사이트는 당신을위한 솔루션을 갖고있는 것 같아요 : jQuery를 : outerHTML에 | Yelotofu

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

  2. 2.나는 현재 (2012년 5월 1일), 모든 주요 브라우저가 outerHTML에 기능을 지원 있다고 생각합니다. 이 조각이 충분하다는 것을 나에게 보인다. 나는 개인적으로이를 기억하도록 선택할 것입니다 :

    나는 현재 (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에 대한 기본 지원 통계


  3. 3.필요가 그것을위한 기능을 생성 없습니다. 그냥 이런 식으로 작업을 수행합니다

    필요가 그것을위한 기능을 생성 없습니다. 그냥 이런 식으로 작업을 수행합니다

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

    (브라우저의 콘솔 그런데, 기록되는 것을 보여줍니다. 2009 주위부터 최신 브라우저의 대부분이 기능이 있습니다.)

    마법은 끝이 있습니다 :

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

    클론은 실제로 DOM을 방해하지 않는 것을 의미한다. 바람직하지 않다있는없이 그것을 실행하고 (이 예에서는) 모든 하이퍼 링크 후 / 전에 삽입 P 태그를 볼 수 있습니다. 그래서, 그래, 사용 .clone ().

    작동 방법은, 각각의 태그를 취 RAM에서의 복제를 만들고, P 태그 랩, 그것의 부모합니다 (p 태그를 의미)를 취득하고 그것의 innerHTML 속성을 얻을 수 있다는 것입니다.

    편집 : 조언을 툭하고 덜 타이핑이야와 동일하게 작동하기 때문에 P 태그에 div 태그를 변경했습니다.


  4. 4.무엇에 대해 : 소품 ( 'outerHTML에')?

    무엇에 대해 : 소품 ( 'outerHTML에')?

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

    그리고 설정합니다 :

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

    그것은 나를 위해 일했습니다.

    PS :이 jQuery를 1.6에 추가됩니다.


  5. 5.jQuery를 확장 :

    jQuery를 확장 :

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

    그리고 다음과 같이 사용 : $ ( "# myTableRow") outerHTML에을 ().


  6. 6.나는 Arpan (12월 13일 '10 5시 59분)에 동의합니다.

    나는 Arpan (12월 13일 '10 5시 59분)에 동의합니다.

    당신이 사용하는 클론을 해달라고으로 그 일을 그의 방법은 실제로 일을 더 나은 방법입니다. 당신이 자식 요소를 가지고있는 경우 복제 방법은 매우 시간이 많이 소요되고, 아무도 다른 사람 (예 IE 실제로는 소매까지 몇 가지 유용한 트릭이) IE 실제로 outerHTML에 속성을 가질 것을 걱정 것 같았다.

    하지만 아마도 그의 스크립트 A는 다른 비트 만들 것입니다 :

    $.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;
        }
    };
    

  7. 7.진정한 jQuery를 - 억양을하기 위해, 당신은 outerHTML에 ()가 게터와 세터 수 및 HTML () 가능한 한 유사한 등의 동작을 할 수 있습니다 :

    진정한 jQuery를 - 억양을하기 위해, 당신은 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;
    }
    

    이 될 수있는, outerHTML에에 인수를 전달할 수있게 해준다

    자세한 내용은 HTML에 대한 jQuery를 워드 프로세서 ()을 참조하십시오.


  8. 8.당신은 또한 얻을 사용 (jQuery 오브젝트가 일치하는 DOM 요소를 검색합니다.) 할 수 있습니다.

    당신은 또한 얻을 사용 (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">'
    

  9. 9..outerHTML로 전체 jQuery 플러그인을하려면 헤더에 jQuery를 한 후 모든 JS 파일에 다음 스크립트를 추가하고 다음과 같습니다 :

    .outerHTML로 전체 jQuery 플러그인을하려면 헤더에 jQuery를 한 후 모든 JS 파일에 다음 스크립트를 추가하고 다음과 같습니다 :

    ;(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에를 얻을 수 있지만, 심지어 한 번에 여러 요소의 배열의 수익을 얻을 것이다! 과 같은 두 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, 태그") outerHTML에 ().'+ '\ t ", $ ("# firstEle, .someElesByClassname, 태그 ") outerHTML에 ().); VAR checkThisOut = $ ( "DIV") outerHTML에 ().; 을 console.log ( 'var에 checkThisOut = $ ( "DIV") outerHTML에 ().'+ '\ t \ t ", checkThisOut); $ .each (checkThisOut, 기능 (전, STR) {. ($ ( "DIV") EQ (I)는 .text를 "내 outerHTML에이 되었습니까 :"+ STR);}); <스크립트 SRC = "https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> <스크립트 SRC = "https://rawgit.com/JDMcKinstry/ce699e82c7e07d02bae82e642fb4275f/raw/deabd0663adf0d12f389ddc03786468af4033ad2/jQuery.outerHTML.js">

    이 것
    대체
    에서하는 런타임

    <태그> 콘솔 열기보고 결과


  10. 10.당신은 또한 그냥이 방법을 수행 할 수 있습니다

    당신은 또한 그냥이 방법을 수행 할 수 있습니다

    document.getElementById(id).outerHTML
    

    여기서 ID는 당신이 찾고있는 요소의 ID입니다


  11. 11.나는 파이어 폭스에 대한 작업에 outerHTML에를 얻을 수 (조쉬에 의해 편집 된) 제시카의 솔루션을 사용했다. 문제는 그러나 그녀의 솔루션은 DIV로 요소를 포장하기 때문에 내 코드가 파괴 된 것입니다. 코드 하나 개 더 라인을 추가하면 그 문제를 해결했다.

    나는 파이어 폭스에 대한 작업에 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에을 ().

    희망 누군가가 유용 발견!


  12. 12.

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

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


  13. 13.시나리오가 새 행의 동적를 추가하는 경우, 당신은이를 사용할 수 있습니다 :

    시나리오가 새 행의 동적를 추가하는 경우, 당신은이를 사용할 수 있습니다 :

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

    .myrow는 의 클래스이다. 그것은 그 새로운 마지막 행으로 마지막 행과 삽입의 복사본을 만듭니다. 에서 [0] .outerHTML 방법은 IE7에서 할당을 허용하지 않는 동안 이것은 또한, IE7에서 작동


  14. 14.node.cloneNode ()는 거의 해킹처럼 보인다. 사용자는 노드를 복제 할 수 있으며 임의의 부모 요소에 추가하고, 또한 각각의 속성을 조작하는 것이 아니라 예를 구비하여 조작 다음 afterwords를 조작, 거기에 정규 표현식을 실행하거나 DOM에 추가합니다.

    node.cloneNode ()는 거의 해킹처럼 보인다. 사용자는 노드를 복제 할 수 있으며 임의의 부모 요소에 추가하고, 또한 각각의 속성을 조작하는 것이 아니라 예를 구비하여 조작 다음 afterwords를 조작, 거기에 정규 표현식을 실행하거나 DOM에 추가합니다.

    즉 당신은 또한 그것의 HTML 문자열 표현을 구성하는 요소의 속성을 반복 할 수 말했다. 하나를 추가 할 jQuery를 얼마나 어떤 outerHTML에 기능이 구현 될 것입니다 것으로 보인다.


  15. 15.나는 제시카 업데이트 Volomike의 솔루션을 사용했습니다. 그냥 요소가 존재하는지 확인하기 위해 검사를 추가하고 그것을하지 않는 경우 공백을 반환했다.

    나는 제시카 업데이트 Volomike의 솔루션을 사용했습니다. 그냥 요소가 존재하는지 확인하기 위해 검사를 추가하고 그것을하지 않는 경우 공백을 반환했다.

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

    물론, 그것을처럼 사용

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

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

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

    만 반환 요소의 HTML 콘텐츠, .outerHTML ()이 버전은 선택한 요소와 HTML 내용이나 .replaceWith () 방법으로 만 대체 HTML에 의해 상속 될 수있는 차이점을 대체를 반환 .html 중에서 ()과 달리 체인 연결.

    예는 위의 URL에서 볼 수 있습니다.


  17. 17.조쉬의 솔루션은 단일 요소에 대해 작동합니다.

    조쉬의 솔루션은 단일 요소에 대해 작동합니다.

    틀림없이, 당신은 하나의 요소가있을 때 "외부"HTML은 정말 의미가 있지만,이 HTML 요소의 목록을 마크 업으로 그들을 설정하는 것이 합리적 경우가 있습니다.

    조쉬의 솔루션을 확장,이 사람은 여러 요소를 처리합니다 :

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

    편집 : 고정 조쉬의 솔루션의 또 다른 문제, 위의 설명을 참조하십시오.


  18. 18.임시 DOM 객체의 제거 추가 된 다른 유사한 솔루션 ().

    임시 DOM 객체의 제거 추가 된 다른 유사한 솔루션 ().


  19. 19.I는 outerHTML에 용액 tokimon (클론)없이 존재하고 outerHTML2 제시카 용액 인과 간단한 테스트를 만들었다 (클론)

    I는 outerHTML에 용액 tokimon (클론)없이 존재하고 outerHTML2 제시카 용액 인과 간단한 테스트를 만들었다 (클론)

    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)


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

    여기에 대한 jQuery 매우 최적화 된 outerHTML에 플러그인은 다음과 같습니다 (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는 게터와 세터를 필요로하지 않습니다 jQuery를 이미 'replaceWith'우리에게 ...

    @mindplay => 왜 모든 outerHTML에 합류입니까? 첫 번째 요소의 HTML 콘텐츠를 반환 jquery.html.

    (죄송합니다, 쓰기 의견을 충분히 평판이 없습니다)


  21. 21.짧고 달다.

    짧고 달다.

    [].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, '')
    

  22. 22.이 바닐라 자바 ​​스크립트와 매우 간단합니다 ...

    이 바닐라 자바 ​​스크립트와 매우 간단합니다 ...

    document.querySelector('#selector')
    

  23. 23.이것은 DOM의 요소를 변경하는 중대하다 그러나이 같은 JQuery와에 HTML 문자열에 전달할 때, 즉 작동하지 않습니다 :

    이것은 DOM의 요소를 변경하는 중대하다 그러나이 같은 JQuery와에 HTML 문자열에 전달할 때, 즉 작동하지 않습니다 :

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

  24. 24.$ .HTML = 엘 => $ ( "
    "+ 엘 + "") HTML을 () 트림 ()..;

    $ .HTML = 엘 => $ ( "

    "+ 엘 + "") HTML을 () 트림 ()..;


  25. 25.나는 다음 테이블 행을 제거 내가 동적 데이터 행을 생성했기 때문에 (테이블의 맨 아래에 다시 추가하려고했던 것이 었습니다 내 문제에 대한 답을 찾고있는 동안이 건너 온 그러나 '추가 신규를 보여주고 싶었다 하단의 기록 '타입 행).

    나는 다음 테이블 행을 제거 내가 동적 데이터 행을 생성했기 때문에 (테이블의 맨 아래에 다시 추가하려고했던 것이 었습니다 내 문제에 대한 답을 찾고있는 동안이 건너 온 그러나 '추가 신규를 보여주고 싶었다 하단의 기록 '타입 행).

    는 innerHTML을 반환 그래서 그 행의 ID를 보유하고 절차를 반복하는 것은 불가능했다 의미했다 TR 태그를 누락 한 점에서 나는 같은 문제가 있었다.

    내가 찾은 답은 JQuery와 제거 () 함수는 실제로 객체로, 제거하는 것으로, 요소를 반환했다. 그래서, 제거하는 방법과이 단순하게했다 행을 다시 추가 ...

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

    개체를 제거하지만 다른 곳에 복사하려면하지 않는 경우, 대신 클론 () 함수를 사용합니다.


  26. 26.jQuery를 플러그인 속기 직접 전체 요소의 HTML을 얻을 수로 :

    jQuery를 플러그인 속기 직접 전체 요소의 HTML을 얻을 수로 :

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

    그리고 다음과 같이 사용 : $ outerHTML에 ()을 ( "요소를.").


  27. 27.

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

    특정 하나를 얻으려고 노력하는 경우 경우 'x'를 처음으로 0부터 시작 노드 번호입니다, 당신이 원하는 올바른 노드를 받아야합니다. 당신이 자식 노드가있는 경우, 당신은 정말 하나에 그냥 제로로, 당신은하지만, 원하는 일에 ID를 넣어해야합니다. 그 방법론과 나를 위해 'X'일을 잘 사용.


  28. 28.간단한 솔루션입니다.

    간단한 솔루션입니다.

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

  29. 29.

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

    아마도 내가 제대로 질문을 이해하지 못하는거야,하지만이 선택한 요소의 부모 요소의 HTML을 얻을 것이다.

    당신이 후에 어떤 것인가요?

  30. from https://stackoverflow.com/questions/2419749/get-selected-elements-outer-html by cc-by-sa and MIT license