Given a button with an icon:
<button type="button" class="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown">
People <span class="caret"></span>
</button>
I want to replace the text People and leave the html part of the button.
I have a situation that may require some flexibility. I may not know the inner html of the button.
The resulting html would be something like:
<button type="button" class="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown">
Jeff <span class="caret"></span>
</button>
I do happen to be using jQuery and if I do:
$('button.dropdown-toggle').text('Jeff');
Obviously that will remove the caret. I don't want to remove the caret.
I know that I can get the caret by doing .children(). But I won't necessarily know what order the html element would be in. Maybe the caret is first, or maybe it was placed after the text, it could be in any order. What if there are two icons? I want to only replace the text of the button and leave the html.
I don't usually have control of the HTML that will be in the button.
Given a button with an icon:
<button type="button" class="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown">
People <span class="caret"></span>
</button>
I want to replace the text People and leave the html part of the button.
I have a situation that may require some flexibility. I may not know the inner html of the button.
The resulting html would be something like:
<button type="button" class="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown">
Jeff <span class="caret"></span>
</button>
I do happen to be using jQuery and if I do:
$('button.dropdown-toggle').text('Jeff');
Obviously that will remove the caret. I don't want to remove the caret.
I know that I can get the caret by doing .children(). But I won't necessarily know what order the html element would be in. Maybe the caret is first, or maybe it was placed after the text, it could be in any order. What if there are two icons? I want to only replace the text of the button and leave the html.
I don't usually have control of the HTML that will be in the button.
Share Improve this question edited Jan 1, 2016 at 3:24 Johnston asked Jan 1, 2016 at 3:10 JohnstonJohnston 20.9k22 gold badges75 silver badges123 bronze badges 2- I don't understand if you truly have no vision into the HTML except that there is a '.caret' span after the text you're wanting to change, why you would expect even that fact to hold true. Isn't it just as likely they'll add an image, or formatting, or any sort of update to the content beside 'People'? – erik258 Commented Jan 1, 2016 at 3:32
- Can you even be sure there only ever will be only one text node to replace and that it will never e wrapped in an HTML element? – Wortex17 Commented Jan 1, 2016 at 4:14
5 Answers
Reset to default 9You may not need jQuery for this.
If the position of the text node is known, you can just access the .caret element's previous sibling text node and change the value directly:
document.querySelector('.btn .caret').previousSibling.nodeValue = 'Something';.caret {
display: inline-block; width: 0; height: 0; margin-left: 2px; vertical-align: middle; border-top: 4px dashed; border-top: 4px solid\9; border-right: 4px solid transparent; border-left: 4px solid transparent;
}<button type="button" class="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown">
People <span class="caret"></span>
</button>Alternatively, if the position of the text varies, you could also just use the .content() method to retrieve the children elements and text nodes. Iterate over the values and determine if it is a text node and change it.
$('.btn').contents().each(function() {
if (this.nodeType === 3 && this.nodeValue.trim()) {
this.textContent = 'Something';
}
}).caret {
display: inline-block; width: 0; height: 0; margin-left: 2px; vertical-align: middle; border-top: 4px dashed; border-top: 4px solid\9; border-right: 4px solid transparent; border-left: 4px solid transparent;
}<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" class="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown">
People <span class="caret"></span>
</button>Put "People" itself in a tag and change the contents of that tag. This can acmodate more changes in the HTML inside the button without ensuring that the only text, the first text, the caret's sibling, etc is the element to replace, and regardless of whether the text 'People' changes.
document.querySelector('.btn .target').innerHTML = 'Something';.caret {
display: inline-block; width: 0; height: 0; margin-left: 2px; vertical-align: middle; border-top: 4px dashed; border-top: 4px solid\9; border-right: 4px solid transparent; border-left: 4px solid transparent;
}<button type="button" class="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown">
<span class='target'>People</span> <span class="caret"></span>
</button>You can change like that to add an inner span for button name:
<button type="button" class="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown">
<span id='innerBtn'>Jeff <span>
<span class="caret"></span>
</button>
$("#innerBtn").html('TEXT CHANGE');
If you don't have access on your HTML than try this:
$('.btn btn-default').html($('.btn btn-default').html().replace('Jeff','TEXT CHANGE'));
var strNewString = (your class name or div name).html().replace('people','Jeff');
your class/div.html(strNewString);
This will replace the string 'people' with Jeff.
try, something like this.
function change() {
var c = $("button").children();
$("button").text("second ").append(c);
}<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button onClick="change()">first <span>Span</span>
</button>