अपनी आंतरिक टैग सामग्री को बदलने के बिना div का पाठ बदलना

Question

In this plunk मेरे पास div है जिसमें पाठ के साथ कुछ टेक्स्ट और span भी शामिल है।

मेरा उद्देश्य span के पाठ को बदले बिना div के पाठ को बदलना है।

मैंने jQuery के साथ प्रयास किया लेकिन समस्या यह है कि पूरे div टेक्स्ट परिवर्तन, span टेक्स्ट, किसी भी विचार को प्रतिस्थापित करते हुए?

एचटीएमएल

<div id="id1">some text to change <span>THIS TEXT STAYS</span></div> 

जावास्क्रिप्ट:

$(document).ready(function() { 
    var id1 = $("#id1"); 
    id1.text("New Text"); 
}); 

Answer 1

यह दुर्लभ स्थानों jQuery आप के लिए ज्यादा कुछ नहीं है में से एक है।

$(document).ready(function() { 
 
    var id1 = $("#id1"); 
 
    // The [0] accesses the raw HTMLDivElement inside the jQuery object 
 
    // (this isn't accessing internals, it's documented). 
 
    // The `firstChild` is the first node within the `div`, which is 
 
    // the text node you want to change. `nodeValue` is the text of the 
 
    // Text node. 
 
    id1[0].firstChild.nodeValue = "New Text"; 
 
});

<div id="id1">some text to change <span>THIS TEXT STAYS</span></div> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

या बिना jQuery (ready को छोड़कर) का उपयोग करते हुए सभी पर:

$(document).ready(function() { 
 
    var id1 = document.getElementById("id1"); 
 
    id1.firstChild.nodeValue = "New Text"; 
 
});

<div id="id1">some text to change <span>THIS TEXT STAYS</span></div> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

Answer 2

आपको लगता है कि div में Text नोड के लिए सीधे जाने के लिए चाहते हैं

कृपया एक लोयो है इस दृष्टिकोण पर k:

$(document).ready(function() { 
 
    
 
    $("#id1").contents().get(0).nodeValue = "New Text 1 " 
 
    
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 
<div id="id1">some text to change <span>THIS TEXT STAYS</span></div>

Answer 3

उपयोग outerHTML:

$('#id1').html("New Text "+$('#id1 span')[0].outerHTML)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="id1">some text to change <span>THIS TEXT STAYS</span></div>

Answer 4

एचटीएमएल: -

<div id="id1">some text to change <span>THIS TEXT STAYS</span></div> 

Jquery: -

$(document).ready(function() { 
    var abcd = $('span').text(); 
    $("#id1").html("New Text "+'<span>'+abcd+'</span>'); 
}); 

हमने पूरे फिर से संगठित कर सकते हैं डोम आवश्यक अवधि tage पाठ()

की जांच करें अपडेट किया गया Fiddle

Answer 5

इस कोड का प्रयास करें,

हो रही द्वारा

var id = document.getElementById('id1'); 
 
var newText = id.childNodes[0]; 
 
newText.nodeValue = 'Replaced by me ';

<div id="id1">some text to change <span>THIS TEXT STAYS</span></div>

Answer 6

मैं जानता हूँ कि आप पहले से ही एक जवाब स्वीकार कर लिया है, लेकिन मैं विविधता की खातिर लगा मैं तुम्हें एक jQuery समाधान दिखा सकता है:

एचटीएमएल

<div id="id1"> 
    some text to change <span style='color:red;font-weight:bold;'>THIS TEXT STAYS</span> 
</div> 

jQuery 1.12.4

var $id1 = $('#id1'); 
var $span = $id1.find('span'); 
$id1.text('New Text'); // or $id1.html('New Text'); // your choice 
$id1.append($span); 

---

यह शायद सबसे कुशल समाधान नहीं है लेकिन यह काम पूरा हो जाता है।