Javascript - set innerHTML of span under button

Question

I have a DOM that is being set (in part) by a plugin at runtime so I don't have full control over it. The initial object that I create in my HTML is a <select> object to which the plugin bootstrap-select is creating a <button> as a sibling. This <button> in turn has a child <span> element (also created by the plugin). It is this <span> element whose text I want to change.

I also am changing the background color of the button itself, and this works. I just need to add a line or two to my function to update the text of the span, and I'm good to go.

Here is a screenshot of the relevant part of the DOM (the gray part is what I have to set):

And here is my code. This was written originally to set the background color of the button, and to that extent it works correctly. I just need to expand it to set the text, as well:

function setColorForSelect(elem, col) {
    // this will change the background color of the <select> object just changed to match the selection
    // this is necessary because bootstrap-select imposes a complex DOM structure on the <select> item
    // (there is a <button> that is what is being displayed, so that is the object whose background color needs
    //    to be changed, not the <select> object itself)

    $(elem).siblings().each(function() {
        var _this = $(this);
        if(_this.is(":button")){
             _this.css('background-color', col);
             $(this).children(":first").innerHTML = col; //<-- THIS IS THE LINE THAT DOESN'T WORK!
             return false;
         }
    }); 
}

This isn't throwing any errors, but it isn't changing anything that I can see. How can I get a reference to this <span> so that I can change its text? Thank you!

Rajshekar Reddy · Accepted Answer · 2016-03-29T18:11:41.240

1

Use this syntax.

Find the first span in the button and change its text.

$(this).find("span:eq(0)").text(col);

Or

Find the span by specific class and change its text.

$(this).find("span.filter-option").text(col);

There are couple of other methods too. I think those are already pointed out in other answers.

edited Mar 29 '16 at 18:11

answered Mar 29 '16 at 18:04

Rajshekar Reddy

18,647
3
40
59

1

I think that your second idea worked. I can see the text change for a second or so, then it reverts back to the text in the 0th – AndroidDev Mar 29 '16 at 18:11
@Randall but I think rather than going in this route you must go through the plugin documentation and find out the method to set a value to the span. I am sure the plugin will have that feature.. What ever you are trying would be a work around. Keep this as last option – Rajshekar Reddy Mar 29 '16 at 18:13
I agree. I've been searching, but can't find anything in their documentation. The best thing that I can find is this post, which essentially suggests traversing the DOM tree like I am doing. http://stackoverflow.com/questions/13437446/how-to-display-selected-item-in-bootstrap-button-dropdown-title – AndroidDev Mar 29 '16 at 18:20

score 1 · Answer 2 · answered Mar 29 '16 at 18:10

The reason there are no errors is because you just assigned the col value to an innerHTML property on a jQuery object.

Either use the html function jQuery provides for its object

.children(":first").html(col);

or use the text function jQuery provides

.children(":first").text(col);

or use the native JavaScript api by accessing the native element

.children(":first")[0].innerHTML = col;

or use the getter jQuery provides to get the native element and then use the native API

.children(":first").get(0).innerHTML = col

score 0 · Answer 3 · answered Mar 29 '16 at 18:37

0

One more...

You could also do:

$('span:first',this).text(col); //

Hope it helps!

answered Mar 29 '16 at 18:37

ErickBest

4,586
5
31
43

Javascript - set innerHTML of span under button

3 Answers3