Question

我需要使用Javascript修改以下HTML，

<div id="1">
   some text
   <div id="2"></div>
</div>

我尝试过使用$('#1').text('new text');但是，这无意中删除了<div id="2">

如何在不更改周围元素的情况下更改some text？

Answer 1

这将更改第一个node（在您的示例中为文本节点）的值：

$('#1').contents()[0].nodeValue = 'new text';

JSFiddle

Answer 2

尝试以下

<div id="1">
   <span id='myspan'>some text</span>
   <div id="2"></div>
</div>

然后使用;

$('#myspan').text('new text');

Answer 3

如果合理，请执行以下操作：

<div id="1">
   <span id="edit">some text</span>
   <div id="2"></div>
</div>

然后，您可以像这样编辑文本：

$('#edit').text('new text');

基本上，您将要编辑的文本放在带有ID的自己的元素中。请记住，您可以使用任何类型的元素，您不必专门使用span。您可以将其更改为div或p，但您仍会获得相同的结果。

Answer 4

顺便说一句，使用带数字的元素作为元素是不好的做法。

如果您不想更改元素的样式，可以添加跨度。所以在你的情况下你会做这样的事情（我把数字删除为ids）：

<!-- HTML -->
<div id="text-container">
     <span id="some-text">some text</span>
     <div id="something-else"></div>
</div>

在你的JavaScript中：

//JavaScript
$('#some-text').text('new text');

Answer 5

最佳解决方案是将节点类型检查为Node.TEXT_NODE，nodeValue不为空：

$('#1')
.contents()
.filter(function() {
  return this.nodeType === Node.TEXT_NODE && this.nodeValue && this.nodeValue.trim();
})
.replaceWith("new text");

Answer 6

我的解决方案可以替代他人：

var text_to_keep = $('#2').text();

$('#1').text('new text').append('<div id="2">' + text_to_keep + '</div>');

http://jsfiddle.net/LM63t/

P.S。我不认为id以数字开头是有效的。

如何在不影响子元素的情况下更改div中的文本

6 个答案:

JSFiddle