Question

In this 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");
});

Answer 1

这是jQuery对你不起作用的罕见地方之一。您希望直接转到Text中的div节点：

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

请看一下这种方法：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 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>

Answer 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>

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

这可能不是最有效的解决方案，但它可以完成工作。

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

我们可以通过获取跨度 text（）

重建整个所需的DOM

请检查更新 Fiddle

更改div的文本而不更改其内部标记内容

6 个答案: