jQuery अद्यतन एचटीएमएल तत्व तत्व एचटीएमएल बच्चों के तत्वों को प्रभावित किए बिना

Question

मुझे एक लीटल समस्या है और मुझे नहीं पता कि इसे कैसे ठीक किया जाए।

मैं एक HTML पदानुक्रम यहाँ

<ul id="mylist"> 
    <li id="el_01"> 
     <div class="title"> 
      Title Goes Here 
      <span class="openClose"></span> 
     </div> 
    </li> 
</ul> 

मुझे क्या करना चाहते "शीर्षक यहां दिया जाता" संशोधित करने के लिए है की तरह है।

क्या मैं कोशिश है:

$('#el_01 title').text('New Title Goes Here'); 

लेकिन वह भी निकालें:

<span class="openClose"></span> 

वहाँ अद्यतन करने के लिए केवल एक रास्ता "शीर्षक चला जाता है यहाँ" अवधि तत्व को प्रभावित किए बिना है?

Answer 1

आप डीओएम तत्व तक पहुंचकर सीधे टेक्स्ट नोड संपादित कर सकते हैं और firstChild प्राप्त कर सकते हैं।

$('#el_01 .title')[0].firstChild.data = 'New Title Goes Here'; 

यदि कई .title तत्व हैं, आप इसे एक .each() पाश में कर सकते हैं।

$('#el_01 .title').each(function(i,el) { 
    el.firstChild.data = 'New Title Goes Here'; 
}); 

Answer 2

दो संभव समाधान:

कोई एक: लपेटें अपने स्वयं के अंतराल में पाठ:

<div class="title"> 
    <span class="text">Title Goes Here</span> 
    <span class="openClose"></span> 
</div> 

... और अद्यतन है कि:

$('#el_01 .text').text('New Title Goes Here'); 

या: एक प्रतिलिपि रखें एफ openClose अवधि को अद्यतन करने के बाद इसे फिर से सम्मिलित करें:

var openClose = $('#el_01 .title .openClose'); 
$('#el_01 .title').text('New Title Goes Here').append(openClose);