twitter bootstrap - Change element text but leave inner span (or add span back) in jQuery -
i have bootstrap dropdown user selects "past", "this", or "next".
<div class="btn-group dropup three" role="group"> <button type="button" class="btn btn-default dropdown-toggle" id="tpn" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <span class="caret"></span> </button> <ul class="dropdown-menu fullwidth"> <li><a onclick="setpast()">past</a></li> <li><a onclick="setthis()">this</a></li> <li><a onclick="setnext()">next</a></li> </ul> </div>
when option clicked calls appropriate function change text open button. example:
function setpast(){ $('#tpn').text("past"); }
however, function strips away span tag
<span class="caret"></span>
i can not figure out how add span. have tried:
$('#tpn').append("<span class="caret"></span>");
and
$("tnp").text('new-text').append($('<span></span>').addclass('caret'));
how can add span, or better yet, can keep being removed in first place?
just put text in span.
<button type="button" class="btn btn-default dropdown-toggle" id="tpn" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <span class="text">this</span> <span class="caret"></span> </button>
fiddle: https://jsfiddle.net/udzztobp/2/
Comments
Post a Comment