Изменение текста div без изменения его внутреннего содержимого тега

В этом plunk у меня есть div, который содержит текст и span, также с текстом.

Моя цель - изменить текст div, не меняя текст span.

Я попытался с jQuery, но проблема в том, что весь текст div изменяется, заменяя также текст span, любые идеи?

HTML

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

JavaScript:

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

Ответ 1

Это одно из редких мест, в котором jQuery мало что делает для вас. Вы хотите перейти прямо к Text node тем, что div:

$( document ).ready(function() {
    var id1 = $("#id1");
    // The [0] accesses the raw HTMLDivElement inside the jQuery object
    // (this isn't accessing internals, it 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>

Ответ 2

Пожалуйста, взгляните на этот подход:

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

Ответ 3

Попробуйте этот код,

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>

Ответ 4

Используйте 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>

Ответ 5

Я знаю, что вы уже приняли ответ, но я решил ради разнообразия. Я мог бы показать вам решение jQuery:

HTML

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

Это, вероятно, не самое эффективное решение, но оно выполняет свою работу.

Ответ 6

Html: -

 <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>');
});

Мы можем восстановить всю необходимую DOM, получив значение text()

Пожалуйста, проверьте Обновленный Fiddle