Replace / change button text but leave html internal elements

Question

For the icon button:

<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. Perhaps I do not know the internal html of the button.

As a result, html will look something like this:

 <button type="button" class="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown"> Jeff <span class="caret"></span> </button> 

I am using jQuery, and if so, then:

 $('button.dropdown-toggle').text('Jeff'); 

Obviously, this will remove the carriage. I do not want to remove the carriage.

I know that I can get the .children() doing .children() . But I will not necessarily know in what order the html element should be. Perhaps the carriage first, or maybe it was placed after the text, it can be in any order. What if there are two icons? I only want to replace the button text and leave html.

Usually I can’t control the HTML that will be in the button.

Answer 1

You may not need jQuery for this.

If the position of the node text is known, you can simply access the .caret element of the previous node source text 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 changes, you can also simply use the .content() method to retrieve the children and text nodes. Iterate over the values ​​and determine if it is the 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.com/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> 

Answer 2

You can change this to add an internal range for the 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 to HTML, try this:

 $('.btn btn-default').html($('.btn btn-default').html().replace('Jeff','TEXT CHANGE')); 

Answer 3

 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 .

Answer 4

Put the "People" in the tag and change the contents of this tag. This can accommodate more changes to the HTML inside the button, without guaranteeing that only text, first text, brothers, etc. They are a replaceable element 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> 

Answer 5

try something like this.

 function change() { var c = $("button").children(); $("button").text("second ").append(c); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button onClick="change()">first <span>Span</span> </button>