jQuery को कंटेनर सहित HTML का कंटेनर मिलता है

156

मैं '#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 प्राप्त करता है। इसमें स्वयं # तत्व शामिल नहीं है। मैं यही कर रहा हूँ

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

Http://jsfiddle.net/rzfPP/58/ की जाँच करें

javascript jquery

— पिंकी
स्रोत

आप कंटेनर को किसी अन्य कंटेनर के अंदर रख सकते हैं और उस कंटेनर को प्राप्त कर सकते हैं html ... लेकिन यह थोड़ा हैकची लगता है। शायद अगर हम समस्या के बारे में थोड़ा और जानते थे, तो हम एक व्यावहारिक समाधान के साथ आ सकते थे? आप html से भरे पाठ क्षेत्र के साथ क्या कर रहे हैं?

— पेट्रीसिया

चयनित तत्व के बाहरी एचटीएमएल के

— इयान मैकिनन

160

यदि आप कंटेनर को डमी Pटैग में लपेटते हैं तो आपको कंटेनर HTML भी मिलेगा।

आपको बस इतना करना है

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

Http://jsfiddle.net/rzfPP/68/ पर कार्यशील उदाहरण देखें

जब किया टैग करने unwrap()के <p>लिए, आप जोड़ सकते हैं

$('#container').unwrap();

— हुसैन
स्रोत

19

@ mc10 हम केवल क्लोन () का उपयोग कर सकते हैं और आपको निर्मित अतिरिक्त तत्वों के बारे में चिंता करने की आवश्यकता नहीं होगी। var x = $('#container').clone().wrap('<p/>').parent().html();। रैप का विचार बहुत अच्छा है और कम जटिल आवंटित किया गया है, तो अधिकांश समाधान प्रदान किए गए हैं।

— पिंकी

फ़ायरफ़ॉक्स मुद्दा पुराना है, इसलिए मैं @MikeM उत्तर को वोट करने का सुझाव देता हूं क्योंकि यह शुद्ध JS में है।

— रोब

6

एक <p>टैग क्यों ? एक <div>और अधिक मतलब नहीं होगा ?

— मार्टिन बर्च

6

इसका बहुत सरल उपाय है। मेरा जवाब देखिए।

— 1.44mb

132

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

अद्यतन : यह अब फ़ायरफ़ॉक्स 11 (मार्च 2012) के रूप में फ़ायरफ़ॉक्स द्वारा समर्थित है

जैसा कि अन्य ने बताया है, यह फायरफॉक्स में काम नहीं करेगा। यदि आपको फायरफॉक्स में काम करने की आवश्यकता है, तो आप इस प्रश्न के उत्तर पर एक नज़र डालना चाहते हैं: jQuery में, क्या कोई फ़ंक्शन है जो html () या पाठ () के समान है लेकिन मिलान किए गए घटक की पूरी सामग्री को वापस कर सकते हैं?

— ShaneBlake
स्रोत

6

यह फ़ायरफ़ॉक्स में काम करता है, और यह अब तक के स्वीकृत समाधान से बेहतर है।

— लुकिता

यह ऐसा करने का एक सुंदर तरीका है, बेहतर है तो स्वीकार किया गया उत्तर जो कि सिर्फ एक गंदा हैक था

— मिनहाजुल

यह पूर्ण है।

— गौरव अग्रवाल

यह सही उत्तर है क्योंकि डिव या पी के साथ माता-पिता के टैग को लपेटना बुरा विचार है। हो सकता है कि आपका सीएसएस टूट जाएगा। विशेष रूप से जब आप बूटस्ट्रैप (उदाहरण के लिए पंक्ति) का उपयोग कर रहे हों। इसलिए यह उत्तर काफी अच्छा है।

— सुधीर के गुप्ता

73

मुझे इसका उपयोग करना पसंद है;

$('#container').prop('outerHTML');

— 1.44MB
स्रोत

7

यह मेरे लिए सबसे अच्छा समाधान की तरह लगता है, कोई डोम हेरफेर, या छद्म डोम हेरफेर (रैप तरीके) की आवश्यकता है। और jquery वस्तु में पहले से ही संपत्ति है।

— Nieminen

1

इस समाधान से प्यार करें

— समीरा कुमारसिंह

69

var x = $('#container')[0].outerHTML;

— MikeM
स्रोत

1

फ़ायरफ़ॉक्स मुद्दा पुराना है, इसलिए मैं इस उत्तर को वोट करने का सुझाव देता हूं।

— रोब

1

.Clone () का उपयोग कर काम करता है, लेकिन यह बहुत क्लीनर है, imo। स्वीकृत उत्तर DOM = बुरे में नए तत्व बनाता है।

— पीट

13

$('#container').clone().wrapAll("<div/>").parent().html();

अद्यतन: बाहरी HTML अब फ़ायरफ़ॉक्स पर काम करता है इसलिए अन्य उत्तर का उपयोग करें जब तक आपको फ़ायरफ़ॉक्स के बहुत पुराने संस्करणों का समर्थन करने की आवश्यकता न हो

— रॉबर्ट नैक
स्रोत

बाहरी HTML प्रॉपर्टी फ़ायरफ़ॉक्स पर काम नहीं करती है, इसलिए आपको इसे क्लोन के साथ करने की आवश्यकता है

— रॉबर्ट नैक

2

Oldie लेकिन गोल्डी ...

चूंकि उपयोगकर्ता jQuery के लिए पूछ रहा है, मैं इसे सरल रखने जा रहा हूं:

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

इधर उधर करना।

— Prinsen
स्रोत

2

यह कंटेनर के html को पुनः प्राप्त करने में मदद नहीं करता है। यह html कोड भी वापस नहीं करता है। मैं देख सकता हूं कि डोम को संशोधित करने से बचने के लिए क्लोन के माध्यम से लक्ष्य नोड तक पहुंचना व्यावहारिक हो सकता है, लेकिन फिर यह उल्लेख करना अच्छा होगा कि आप इस पद्धति का उपयोग क्यों करते हैं।

— aeonOfTime

1

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

— अचु श्रीधर
स्रोत

0

फ़ायरफ़ॉक्स बाहरी 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);

— kevinji
स्रोत

0

var x = $($('div').html($('#container').clone())).html();

— केई
स्रोत

6

आप एक कथन में 3 jquery ऑब्जेक्ट बना रहे हैं। हालांकि यह काम करता है, यह एक overkill है।

— पिंकी

-2

एक उदाहरण के साथ सरल समाधान:

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

इस DIV को id = "other_div_id" के साथ अन्य DIV में ले जाएँ

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

समाप्त

— hassane86
स्रोत

ओपी एक jQuery ऑब्जेक्ट द्वारा प्रस्तुत कच्चे HTML का अनुरोध कर रहा है, जहां यह विधि एक jQuery ऑब्जेक्ट को एक स्थान से दूसरे स्थान पर ले जाती है।

— साइमन रॉब नोव