Replace dropdown text

You can use a span in the text:

<button id="btnSucursal" type="button" class="btn btn-danger dropdown-toggle"
                              data-toggle="dropdown">
                        <i class="fa fa-map-marker fa-lg" aria-hidden="true"></i>      
                        <span id="btnText">SUCURSAL</span> <span class="caret"></span>
                      </button>

From there you can change it directly:

$("#btnText").text("nuevoTexto");

The function .text() or .html() the jQuery replaces everything inside the parent (in this case the button ), therefore you are replacing everything with "hello" , to do what you intend I recommend you add another span to your button that has a specific class as per example .button_text and then you search within this button the span that contains that class , here is an example:

$('#btnSucursal').find(".button_text").html("hola");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button id="btnSucursal" type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown">
  <i class="fa fa-map-marker fa-lg" aria-hidden="true">=></i>
    <span class="button_text"></span>
  <span class="caret">||</span>
</button>

I hope it helps.

This is a functional solution

<button id="btnSucursal" type="button" class="btn btn-danger dropdown-toggle"
                              data-toggle="dropdown">
                        <i class="fa fa-map-marker fa-lg" aria-hidden="true"></i>      
                        <a  style='text-decoration:none;color:#fff;' id="texto">SUCURSAL<a> <span class="caret"></span>
                      </button>

the java script would be the following

$(document).on("ready", function(e){
    $("#btnSucursal").on("click", function(e){
        $("#btnSucursal >a#texto").text("Cambio");
    });
});