programing

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

telecom 2023. 5. 25. 21:32
반응형

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

j를 합니다Query로 선택한 객체의 HTML을 가져오려고 합니다.나는 알고 있습니다..html()한 객체행, ; 함이수를문제는객행체테블이선한것다경함포입)를 포함한 HTML이 입니다..html()행 내부의 셀만 반환합니다.

주변을 검색해보니 개체를 복제하거나 새로 생성된 디브에 추가하는 등 매우 '해킹'한 유형의 방법이 몇 가지 있습니다. 하지만 이것은 정말 더러운 것 같습니다.요, 의 jQuery의 더나방있습니까를 합니까? 아니면 새로운 버전의 jQuery(1.4.2)가 다음과 같은 종류를 제공합니까?outerHtml기능성?

현재 (2012년 5월 1일) 모든 주요 브라우저가 외부를 지원한다고 생각합니다.HTML 함수입니다.제가 보기에는 이 토막글로 충분해 보입니다.저는 개인적으로 이것을 외우는 것을 선택할 것입니다.

// 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태그, RAM에서 복제본을 만들고 랩으로 감습니다.p즉, 그태, 상항가즉니다옵져을목위즉,ptag "tag)"를 .innerHTML그 재산

편집: 조언을 듣고 변경했습니다.div에 대한 태그.p타이핑이 적고 동일하게 작동하기 때문에 태그를 지정할 수 있습니다.

2014년 편집 : 질문과 답변은 2010년 것입니다.당시에는 더 나은 솔루션이 널리 제공되지 않았습니다.이제, 많은 다른 답변들이 더 낫습니다. 예를 들어, 에릭 후나 레 캡차의 답변들입니다.

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

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

다음은 어떻습니까?prop('outerHTML')?

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

설정 대상:

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

그것은 나에게 효과가 있었다.

PS: 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).

클론을 사용하지 않기 때문에 그의 방식이 실제로 훨씬 더 나은 방식입니다.복제 방법은 매우 시간이 많이 소요됩니다. 만약 당신이 어린이 요소를 가지고 있다면, 그리고 다른 사람들은 IE가 실제로 그것을 가지고 있는지 신경쓰지 않는 것 같습니다.outerHTML속성(네, 실제로 몇 가지 유용한 트릭이 있습니다.

하지만 저는 아마 그의 대본을 조금 다르게 만들 것입니다.

$.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-esque가는 진로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/

이를통우인전수있습다니달할수를리는해▁to에 인수를 전달할 수 .outerHTML어느 쪽인가 하면

  • 한 함수 - 취소가기능한능 -function (index, oldOuterHTML) { }될단, 여반이단값요대환다새것 HTML될입니기운로서한소은,false반환됨).
  • 각 요소의 HTML 대신 설정되는 문자열입니다.

자세한 내용은 의 jQuery 문서를 참조하십시오.

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

을 JQuery로 .outerHTML 뒤에 합니다.js 파일다음스뒤에헤포함다 jQuery 합니에더 고하가추에를트.

update 새로운 버전은 더 나은 제어 기능과 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);

이렇게 하면 외부 장치만 사용할 수 있습니다.한 요소의 HTML이지만 동시에 여러 요소의 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가 편집함)을 사용했습니다.파이어폭스에서 작동할 HTML.하지만 문제는 그녀의 솔루션이 요소를 DIV로 포장했기 때문에 제 코드가 깨지고 있었다는 것입니다.코드 한 줄을 더 추가하면 그 문제가 해결되었습니다.

다음 코드는 외부를 제공합니다.HTML이 DOM 트리를 변경하지 않고 있습니다.

$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")와 같이 사용합니다.외부 HTML();

누군가가 그것을 유용하게 생각하기를 바랍니다!

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

Fiddle here: http://jsfiddle.net/ezmilhouse/Mv76a/

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

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

.myrow는 의클스이다니름입래의 이름입니다.<tr>마지막 행의 복사본을 만들고 새 마지막 행으로 삽입합니다.이것은 IE7에서도 작동하지만, 반면에[0].outerHTML메서드가 i7에서 할당을 허용하지 않습니다.

node.cloneNode()는 해킹처럼 보이지 않습니다.노드를 복제하여 원하는 상위 요소에 추가할 수 있으며, 정규식을 실행하거나 DOM에 추가한 다음 단어를 사용하여 노드를 조작할 필요 없이 개별 속성을 조작할 수도 있습니다.

즉, 요소의 속성을 반복하여 HTML 문자열 표현을 구성할 수도 있습니다.이것이 어떤 외계인이든 간에HTML 기능은 jQuery를 추가하면 구현됩니다.

제시카가 업데이트한 볼로미케의 솔루션을 사용했습니다.요소가 존재하는지 확인하기 위해 체크를 추가하고, 존재하지 않을 경우 공백으로 되돌립니다.

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에서도 확인할 수 있습니다.

바닐라 자바스크립트를 사용하면 매우 간단합니다.

document.querySelector('#selector')

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 개체의.

나는 외부와 함께 이 간단한 테스트를 만들었습니다.HTML은 tokimon 솔루션(클론 없음) 및 외부HTML2가 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))의 결과는

외부 HTML: (HTML): 81ms
외부 HTML2: 439ms 파일 : 439ms

하지만 만약 우리가 토키몬 용액을 사용하지 않고 사용한다면,HTML 기능(현재 거의 모든 브라우저에서 지원됨)

우리는.

외부 HTML: 594ms
외부 HTML2: 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)

여기 매우 최적화된 아우터가 있습니다.jquery용 HTML 플러그인: (http://jsperf.com/outerhtml-vs-jquery-clone-hack/5 => 다른 2개의 빠른 코드 스니펫은 FF < 11과 같은 일부 브라우저와 호환되지 않습니다.)

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

@앤디 E => 저는 당신의 의견에 동의하지 않습니다.외부 HMTL은 게터와 세터가 필요하지 않습니다. jQuery는 이미 우리에게 '교체'를 제공합니다.'와 함께...

@mindplay => 왜 모든 outerHTML에 가입하십니까?jquery.dll은 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, '')

이것은 돔에서 요소를 변경하는 데 유용하지만 다음과 같은 html 문자열을 jquery로 전달할 때는 iE에 대해 작동하지 않습니다.

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

이 문제에 대한 답을 찾다가 우연히 발견했습니다. 즉, 테이블 행을 제거한 다음 테이블 아래에 다시 추가하려고 했습니다(데이터 행을 동적으로 생성하고 있었지만 맨 아래에 '새 레코드 추가' 유형 행을 표시하려고 했기 때문입니다).

내부 Html을 반환한다는 점에서 동일한 문제가 있었습니다. TR 태그가 누락되어 해당 행의 ID를 보유하고 있으며 절차를 반복할 수 없습니다.

제가 찾은 답은 그 질문이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();

순수 자바스크립트:

var outerHTML = function(node) {
  var div = document.createElement("div");
  div.appendChild(node.cloneNode(true));
  return div.innerHTML;
};
$("#myNode").parent(x).html(); 

여기서 'x'는 0으로 시작하는 노드 번호로, 특정 노드를 가져오려면 원하는 노드를 얻어야 합니다.만약 여러분이 아이 노드를 가지고 있다면, 여러분은 정말로 여러분이 원하는 아이 노드에 아이디를 입력해야 합니다. 그 아이 노드에 0을 맞추려면 말이죠.그 방법론을 사용하고 'x'를 사용하지 않는 것이 저에게는 잘 작동했습니다.

간단한 해결책.

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

질문을 제대로 이해하지 못했을 수도 있지만 선택한 요소의 상위 요소 html을 얻을 수 있습니다.

그게 당신이 노리는 건가요?

언급URL : https://stackoverflow.com/questions/2419749/get-selected-elements-outer-html

반응형