在不更改子元素的情况下更改元素的文本

$('button').click(function(){ $(this).prev('label').append('<b>ed</b>').text('Press');
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>Click<b>ed</b></label>
<button>Here</button>

I want to keep the element  or any element exisiting changing the .text()

我想保留元素 或任何现有的元素更改.text()

The steps i'm trying to handle is the following

我正在尝试处理的步骤如下

.append('ed') at first i appended the new element ;

.append(' ed ')首先我添加了新元素;

Driectly after appending the new element i changed the text to Press .text('Press');

附加新元素后,我将文本更改为Press .text('Press');

What i'm trying to do is copying the added ed element before changing the text .text('Press'); then add it again after changing the text()

我想要做的是复制添加的 ed 元素,然后再更改文本.text('按');然后在更改文本后再添加它()

So it would be like

所以它会是这样的

var element = $(this).prev('label').clone('b');
$(this).prev('label').append('<b>ed</b>').text('Press'+element+'');

The problem i keep getting the element value = [Object object]

我一直得到元素值的问题= [对象对象]

4 个解决方案

#1

In order to access the text part, you need to use .contents()

要访问文本部分,您需要使用.contents()

See this answer and comments for more info.

有关详细信息,请参阅此答案和评论。

$("#x").append("<b> pressed</b>")
       .contents().filter(function(){return this.nodeType == 3;}).first()
       .replaceWith("well done");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='x'>Press</div>

#2

Just use .html() method in order to display the text desired as HTML.

只需使用.html()方法即可显示所需的HTML文本。

$('button').click(function(){ $(this).prev('label').html('Press<b>ed</b>');
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>Click<b>ed</b></label>
<button>Here</button>

Another solution:

$('button').click(function(){ $(this).prev('label').empty().append('<b>ed</b>').html('Press'+$(this).prev('label').html());
})

#3

Here is an example using .text() and .append(). Keep in mind that .text() will replace the element's content in its entirety, so it's important to use .append() last.

以下是使用.text()和.append()的示例。请记住,.text()将完整地替换元素的内容,因此最后使用.append()非常重要。

$('button').on('click', function() {
    var boldedElem = $(this).prev('label').find('b');
    $(this).prev('label').text('Press').append(boldedElem);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>Click<b>ed</b></label>
<button>Here</button>

#4

Look for all  in this label, take the last one and modify its content using html()

查找此标签中的所有,取最后一个并使用html()修改其内容

$('button').click(function(){ 
var label = $(this).prev('label');
label.find('b').last().html('Press');
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>Click<b>ed</b></label>
<button>Here</button>

#1