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

I need to modify the following HTML using Javascript,

我需要用Javascript修改下面的HTML，

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

I have tried using $('#1').text('new text'); However, this unintentionally removes <div id="2">

我尝试过使用$(#1)。文本(“新文本”);然而，这无意中删除了

How should I change some text, without changing the surrounding elements?

我应该如何改变文本，而不改变周围的元素?

6 个解决方案

#1

This will change the value of the first node (which is a text node in your example):

这将改变第一个节点的值(在您的示例中是一个文本节点):

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

JSFiddle

#2

Try the following

试试以下

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

Then use;

然后使用;

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

#3

By the way it is a bad practice to use ids with numbers as elements.

顺便说一下，把id和数字作为元素是一种不好的做法。

You can add a span if you don't want to change the style of your element. So in your case you will do something like this (I removed the numbers as ids):

如果不希望更改元素的样式，可以添加span。所以在你的情况下你会做这样的事情(我去掉了id):

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

And in your JavaScript:

和你的JavaScript:

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

#4

If plausible, do something like the following:

如果可行，做如下事情:

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

Then, you can edit your text like so:

然后，你可以这样编辑你的文本:

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

Basically, your putting the text you want to edit in its own element with an ID. Keep in mind that you can use any type of element you want, you don't have to use span specifically. You can change this to div or p and you'll still achieve the same result.

基本上，你可以将你想要编辑的文本放在它自己的元素中，并使用ID。您可以将其更改为div或p，仍然会得到相同的结果。

#5

the best solution is to check the node type as Node.TEXT_NODE and nodeValue is not null:

最好的解决方案是将节点类型检查为node。TEXT_NODE和nodeValue不为空:

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

#6

My solution as an alternative to others:

我的解决方案是:

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

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

http://jsfiddle.net/LM63t/

http://jsfiddle.net/LM63t/

P.S. I don't think id's that begin with a number are valid.

附注:我不认为以数字开头的id是有效的。