programing

jQuery 컨테이너 자체를 포함한 컨테이너의 HTML 가져오기

padding 2023. 9. 5. 19:46
반응형

jQuery 컨테이너 자체를 포함한 컨테이너의 HTML 가져오기

안에 있는 것뿐만 아니라 '#container'를 포함한 '#container'의 html을 가져오려면 어떻게 해야 합니까?

<div id="container">
 <div id="one">test 1 </div>
 <div id="two">test 2 </div>
 <div id="three">test 3 </div>
 <div id="four">test 4 </div>
</div>

#container 안에 html이 들어있는 이것을 가지고 있습니다.#dll 요소 자체를 포함하지 않습니다.그게 제가 찾고 있는 일입니다.

var x = $('#container').html();
$('#save').val(x);

http://jsfiddle.net/rzfPP/58/ 을 확인하십시오.

용기를 더미로 포장하는 경우P태그 당신은 또한 컨테이너 HTML을 얻을 것입니다.

당신이 해야 할 일은

var x = $('#container').wrap('<p/>').parent().html();

http://jsfiddle.net/rzfPP/68/ 에서 작업 예제를 확인합니다.

로.unwrap()<p>완료되면 태그, 추가할 수 있습니다.

$('#container').unwrap();
var x = $('#container').get(0).outerHTML;

업데이트: FireFox 11(2012년 3월) 이후 Firefox에서 지원됩니다.

다른 사람들이 지적했듯이, 이것은 FireFox에서 작동하지 않을 것입니다.FireFox에서 작동하는 데 필요한 경우 다음 질문에 대한 대답을 확인하십시오. "InjQuery, html() 또는 text()와 유사하지만 일치하는 구성 요소의 전체 내용을 반환하는 기능이 있습니까?"

나는 이것을 사용하는 것을 좋아합니다.

$('#container').prop('outerHTML');
var x = $('#container')[0].outerHTML;
$('#container').clone().wrapAll("<div/>").parent().html();

업데이트: 외부HTML은 이제 파이어폭스에서 작동하므로 매우 오래된 버전의 파이어폭스를 지원할 필요가 없는 한 다른 답변을 사용합니다.

늙었지만 골디...

사용자가 jQuery를 요청하기 때문에 단순하게 유지하겠습니다.

var html = $('#container').clone();
console.log(html);

여기서 만지작거려요.

$.fn.outerHtml = function(){
    if (this.length) {
        var div = $('<div style="display:none"></div>');
        var clone =
        $(this[0].cloneNode(false)).html(this.html()).appendTo(div);
        var outer = div.html();
        div.remove();
        return outer;
    }
    else {
        return null;
    }
};

http://forum.jquery.com/topic/jquery-getting-html-and-the-container-element-12-1-2010 에서

Firefox는 Outer를 지원하지 않습니다.HTML을 지원하는 데 도움이 되는 함수를 정의해야 합니다.

function outerHTML(node) {
    return node.outerHTML || (
        function(n) {
            var div = document.createElement('div');
            div.appendChild( n.cloneNode(true) );
            var h = div.innerHTML;
            div = null;
            return h;
        }
    )(node);
}

그런 다음 외부 HTML을 사용할 수 있습니다.

var x = outerHTML($('#container').get(0));
$('#save').val(x);
var x = $($('div').html($('#container').clone())).html();

예제를 사용한 간단한 솔루션:

<div id="id_div">
  <p>content<p>
</div>

ID가 = "other_div_id"인 다른 DIV로 이 DIV를 이동합니다.

$('#other_div_id').prepend( $('#id_div') );

끝내라.

언급URL : https://stackoverflow.com/questions/6459398/jquery-get-html-of-container-including-the-container-itself

반응형