change text of an element without changing child elements

Question

$('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()

The steps i'm trying to handle is the following

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

Driectly after appending the new element i changed the text to 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()

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]

`$(this).prev('label').html('Presseded');` should work for you. — Daerik, Oct 06 '17 at 13:35
@Daerik I know, But i want to understand how to handle it if i used `.append()` then went to `.text() or .html()` for special cases — AXAI, Oct 06 '17 at 13:38
Why not just use a variable? `var lbl=$(this).prev("label"); lbl.append("ed"); lbl.text("press");` (note this will not give you what you want as it will overwrite "press", but that's what your code is trying to do. — freedomn-m, Oct 06 '17 at 13:39
@freedomn-m It is like that, But i'm trying to copy the appended element instead of the label itself. — AXAI, Oct 06 '17 at 13:41
Can you clarify this in the question title and provide html for before / expected after? It's not clear what you mean by "want to *keep*" — freedomn-m, Oct 06 '17 at 13:44
@freedomn-m i `appened ` element, Then i change the entire `parent` element `text` which contains the `appended `, But i want to prevent the `text` from removing the `appended `, My solution was trying to copy it and readd it again, Instead of appending it again. but didn't work. Since i couldn't copy the element using `children('b') nor clone('b')` — AXAI, Oct 06 '17 at 13:49

Mihai Alexandru-Ionut · Answer 1 · 2017-10-06T13:43:59.803

3

Just use .html() method in order to display the text desired as 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());
})

edited Oct 06 '17 at 13:43

answered Oct 06 '17 at 13:35

Mihai Alexandru-Ionut

47,092
13
101
128

The problem is that i want to do it using `appened()` then `text() or html()` Something for a Dynamic usage. – AXAI Oct 06 '17 at 13:37
@AXAI, try second solution. – Mihai Alexandru-Ionut Oct 06 '17 at 13:47

Daerik · Answer 2 · 2017-10-06T13:49:16.260

2

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.

$('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>

edited Oct 06 '17 at 13:49

answered Oct 06 '17 at 13:42

Daerik

4,167
2
20
33

Yes, the part of `.append($('ed'))`, I want to copy it from the label itself instead of creating it. i appened element `ed`, Then change the entire .text while keeping it exisiting. – AXAI Oct 06 '17 at 13:46
`ed` in the html doesn't exist untill i appened it `$(this).prev('label').append(ed)` then i change the using `.text('Press')`, So i don't think `find` would work, I'm trying to do something like copying the after appending it, then adding it again after `.text()` – AXAI Oct 06 '17 at 13:54

score 2 · Accepted Answer · answered Oct 06 '17 at 14:02

In order to access the text part, you need to use .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>

score 1 · Answer 4 · edited Oct 06 '17 at 13:45

1

Look for all  in this label, take the last one and modify its content using 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>

edited Oct 06 '17 at 13:45

freedomn-m

27,664
8
35
57

answered Oct 06 '17 at 13:42

Mathieu VIALES

4,526
3
31
48

Script does not replace the text, but appends the string to the end of ``. – Daerik Oct 06 '17 at 13:44
i thought this was what was expected. i'll edit. Please comment before downvoting -_- – Mathieu VIALES Oct 06 '17 at 13:44
TBH it's still unclear to me what the OP actually wants. – BoffinBrain Oct 06 '17 at 13:45
@BoffinbraiN agreed, so we should be finding out, not wildly guessing – freedomn-m Oct 06 '17 at 13:46
right, sorry i forgot to format :-) thanks for your edit – Mathieu VIALES Oct 06 '17 at 13:46
i thought i understood what was asked, but considering the number of different answers i guess everyone understood it differently -_- – Mathieu VIALES Oct 06 '17 at 13:47

change text of an element without changing child elements

4 Answers4