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


在这个插上 我有一个 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");
});

27
2017-08-03 10:38


起源


id1.firstChild.textContent = 'some text changed' - caub
为了您的使用,您是否需要担心 <span> 在文本的开头或中间? - MonkeyZeus
可能重复 如何在不更改其子元素的情况下更改元素的文本? - insertusernamehere


答案:


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


31
2017-08-03 10:41





请看看这种方法:

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


10
2017-08-03 10:42





试试这个代码,

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>


2
2017-08-03 10:49





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


0
2017-08-03 10:44





我知道你已经接受了答案,但我想为了多样性我可以向你展示一个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);

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


0
2017-08-03 15:57





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 文本() 

请检查更新 小提琴


-1
2017-08-03 10:48



它不保留span元素,它会擦除​​它并仅保留值。如果再次更新div,则以前在span中的文本将不再存在。 - vlaz
现在请检查更新代码我正在获取span标签的文本并重新生成span标签,所以现在它是否正常工作请尽情享受 - aditya