[英]change text of an element without changing child elements
$('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 <b></b>
or any element exisiting changing the .text()
我想保留元素
<b></b>
或任何其他正在更改.text()
元素
The steps i'm trying to handle is the following 我正在尝试的步骤如下
.append('<b>ed</b>')
at first i appended the new element <b>
; .append('<b>ed</b>')
首先我添加了新元素<b>
;
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 <b>ed</b>
element before changing the text .text('Press');
我想做的是在更改文本
.text('Press');
之前复制添加的<b>ed</b>
元素.text('Press');
then add it again after changing the text()
然后在更改
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]
我一直在获取元素值=
[Object object]
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());
})
Here is an example using .text() and .append() . 这是一个使用.text()和.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()
很重要。
$('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>
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>
Look for all <b>
in this label, take the last one and modify its content using html()
在此标签中查找所有
<b>
,获取最后一个并使用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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.