Question

我们在尝试更改网页时遇到以下情况。

<div id="div1">
   Welcome <button id="clicker">Click Me</button>
</div>

这当然只是我们遇到的一个基本例子。我们要做的就是更改div的文字而不会丢失button。例如，我们希望您好，而不是欢迎。

使用jQuery是否有一种简单的方法可以实现此目的？我尝试使用.replace，但似乎没有用。

$("#div1").text().replace("Welcome", "Hi");

更新

感谢大家的快速回复和出色的答案。来自gdoron和mblase75的回应非常好。为简单起见，mblase75似乎很容易实现，但是gdoron不顾一切地逐行解释。再次感谢你！

Answer 1

$('#div1').contents().filter(function() {
    return this.nodeType == 3 &&
           this.data == "Welcome"; // Or this.data.indexof("Welcome") != -1
}).each(function(){
        this.data = "HI";
    });

它做什么？让我们分阶段进行：

$('#div1').contents()选择div1 div。
.filter(function() { return this.nodeType == 3 && this.data == "Welcome";通过两个参数过滤它，节点是“textnode-3”，它保存的数据是“Welcome”。
.each(function(){ this.data = "HI"; });将每个欢迎更改为“HI”

<强> LIVE DEMO

Answer 2

一种方法是使用.html的回调函数：

$('#div1').html(function(i,old) {
    return old.replace('Welcome','hi');
});

http://jsfiddle.net/VsAZu/

Answer 3

你可以这样做：

var el = $('#div1');
el.html( el.html().replace('Welcome', 'Hi') );

但那有点严重，是吗？更好地制作你需要修改的东西都有自己的DOM元素。

<div id='div1'>
  <span class='welcome_text'>Welcome</span>
  <button id='clicker'>Click Me</button>
</div>

$('#div1 span.welcome_text').text('Hi');

Answer 4

这并不优雅，但你不能这样做：

$("#div1").html('Hi <button id="clicker">Click Me</button>');

或者我想你可以构建标记，以便＆＃34;欢迎＆＃34;部分有一个跨度缠绕它像：

<span id="welcome">Welcome</span><button id="clicker">Click Me</button>

以这种方式瞄准。

div包含其他元素时更改div文本

4 个答案: