Jquery - .text() , .html() not working on IE8

Question

Here is the code and jsfiddle link . I tried .text and .html both functions. But both not working on IE8. Could any one provide me the solution for IE ? ( I googled and people seems to have similar kind of problems , but couldn't get solution) Thank You

http://jsfiddle.net/3eaGL/

  <div class="controls">       
            <div class="btn-group" data-toggle="buttons-radio">
                <input name="MySecurity[my_education]" id="MySecurity_my_education" type="hidden" value="0" />                            
                <button type="button" class="btn" value="2" display="Private">P</button>
                <button type="button" class="btn" value="1" display="Friends">F</button>
                <button type="button" class="btn" value="0" display="All ( Public )">A</button>
            </div>   
            <text class="mySecurityDisplay"></text>  
       </div>  




$("button[display]").bind('click', function(){
                    var buttonValue=this.value;
                    $(this).siblings("input[type=hidden]").val(buttonValue);
                    $(this).parent().next().text($(this).attr( 'display' ));
                 });

Answer 1

The issue is this:

<text class="mySecurityDisplay"></text>  

IE8 doesn't render unknown tags, therefore jQuery doesn't select your element, the issue is not related to html or text method. Use a valid tag instead and your code will work.

Answer 2

Your problem is the <text> tag. This isn't a valid HTML tag. IE below version 9 interpretes unknown tags in this way: <text class="mySecurityDisplay"></text> will become <text class="mySecurityDisplay"/><text/> an so you can't insert any content inside it.

Just write <div class="mySecurityDisplay"></div>, this will work.