Addclass after desired element in jQuery

Question

I want to do addClass in jQuery,

When i do try below codes, it result me like image 1

 $('#contineButton').html('Continue').addClass('fa fa-chevron-right');
 $('#contineButton').html('Continue').after().addClass('fa fa-chevron-right');

but, iwant to get the result like below image 2

Original button code:

<button type="button" class="btn btn-success next-step" id="contineButton">
                ${vo.continueButtonText} <i class="fa fa-chevron-right"></i>
</button>

What does your HTML and CSS look like? Either way, `after()` is not what you need as that's designed to insert content after the selected element — Rory McCrossan, Jan 20 '17 at 12:13
Is the *Original button code* the output of your `addClass` operation or what you are trying to achieve? — Kilian Stinson, Jan 20 '17 at 12:16
You just replaced your _whole_ button content with the text `Continue` - so the `i` element does not even exist any more. — CBroe, Jan 20 '17 at 12:17

LordNeo · Accepted Answer · 2017-01-20T12:25:56.640

1

You're using after() and you should be using append()

 $('#contineButton').html('Continue').append('<i class="fa fa-chevron-right"></i>');

EXPLANATION:

You used html->addClass wich in the first try will add the class to the current object (the button) and in the second try (with after) will attempt to do it in an empty element inserted afterwards. The html replaced the content of the button completly so the <i> didn't existed anymore.

edited Jan 20 '17 at 12:25

answered Jan 20 '17 at 12:19

LordNeo

1,195
1
8
21

Why not go `$('#contineButton').html('Continue ');`directly in that case? – connexo Jan 20 '17 at 12:21
@connexo just for the sake of keeping both things separated. – LordNeo Jan 20 '17 at 12:24
What benefits does that offer to compensate for the disadvantages? – connexo Jan 20 '17 at 12:25
Readability, change to prepend is independant of the order it was typed. If you want to avoid the disadvantages of 2 jquery calls you can also type it straight into the html. – LordNeo Jan 20 '17 at 12:29
If you intention is to separate stuff, why not go `$('').appendTo($('#contineButton').html('Continue')).addClass("fa fa-chevron-right");`? – connexo Jan 20 '17 at 12:33
`$('')`? There is no tag to select – LordNeo Jan 20 '17 at 12:41
`$('')` creates an `i` element. – connexo Jan 20 '17 at 14:34

score 1 · Answer 2 · answered Jan 20 '17 at 12:29

1

Try this one:

document.getElementById('contineButton').insertAdjacentHTML('beforeend', '<i class="fa fa-chevron-right"></i>');

But it can be achieved with CSS.

answered Jan 20 '17 at 12:29

eric.dummy

399
1
8
24

Thanks. It may be out of this topic, but I don't understand why are people trying to achieve these trivial tasks with jQuery. – eric.dummy Jan 20 '17 at 12:41

Banzay · Answer 3 · 2017-01-20T12:46:38.623

1

To add text before tag you need to use .before jquery function:

$('#contineButton i').before('Continue');

For your case you need replace text with new text string:

$('#contineButton').contents()[0].remove();
$('#contineButton i').before('Continue');

edited Jan 20 '17 at 12:46

answered Jan 20 '17 at 12:37

Banzay

9,310
2
27
46

Jeroen · Answer 4 · 2017-01-20T12:25:59.497

0

EDIT: This only works incase you're using Bootstrap

Is there a reason why you are trying to achieve this using jQuery?

Should work with this html/css code.

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<button type="button" class="btn btn-success btn-lg">
  Button <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
</button>

edited Jan 20 '17 at 12:25

answered Jan 20 '17 at 12:17

Jeroen

1,168
1
12
24

Did I miss that OP mentioned they are using Bootstrap? – connexo Jan 20 '17 at 12:19
@connexo the fact that he is using 'btn btn-success' looks like he is yeah. – Jeroen Jan 20 '17 at 12:20
I've been using the same naming syntax for my button css classes even before Bootstrap existed. So yes, it may be a hint, and no, answers should not suggest using Bootstrap because it is definitely not clear. – connexo Jan 20 '17 at 12:22
1

Their screenshots also suggest it. – Just a student Jan 20 '17 at 12:24
*suggests* - yes. *states* - no. – connexo Jan 20 '17 at 12:25
Yes you're right, I was 99% sure he was using bootstrap. I'm just here trying to help. – Jeroen Jan 20 '17 at 12:27

score 0 · Answer 5 · answered Jan 20 '17 at 12:24

0

<button type="button" class="btn btn-success next-step" id="contineButton">${vo.continueButtonText} <i class="fa fa-chevron-right"></i>
</button>



$(document).ready(function() {
   $('#contineButton').contents().filter(function() {
                console.log(this)
            return this.nodeType == 3;
        })[0].nodeValue = "The text you want to replace with"
});

JSfiddle

answered Jan 20 '17 at 12:24

Pravin W

2,451
1
20
26

more info can be found here - http://stackoverflow.com/questions/4106809/how-can-i-change-an-elements-text-without-changing-its-child-elements – Pravin W Jan 20 '17 at 12:28

Addclass after desired element in jQuery

5 Answers5