CODEWITHSUNDEEP
jquerycss
Yoga
Yoga

Reputation: 293

Addclass after desired element in jQuery

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');

enter image description here

but, iwant to get the result like below image 2

enter image description here

Original button code:

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

Upvotes: 0

Views: 135

Answers (5)

Banzay
Banzay

Reputation: 9470

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');

Upvotes: 1

eric.dummy
eric.dummy

Reputation: 399

Try this one:

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

But it can be achieved with CSS.

Upvotes: 1

Jeroen
Jeroen

Reputation: 1166

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>

Upvotes: 0

LordNeo
LordNeo

Reputation: 1182

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.

Upvotes: 1

Pravin W
Pravin W

Reputation: 2521

<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

Upvotes: 0

Related Questions