Question

When I use javascript to change the innerhtml of a button, the button looses the padding above and below the text, but retains the padding on the sides.
This is the code I use:

document.getElementById("NextBtn").innerHTML="Finish";

How can I resolve this?

Answer 1

With jQuery widgets you can normally target the .ui-btn-text element that will be a descendant of the original element. For instance here is the HTML markup for an initialized button widget from the jQuery Mobile framework:

<a data-role="button" href="#" data-theme="c" id="test-btn" class="ui-btn ui-btn-corner-all ui-shadow ui-btn-up-c">
    <span class="ui-btn-inner ui-btn-corner-all">
        <span class="ui-btn-text">Click Me (0)</span>
    </span>
</a>

Notice the text is inside the span.ui-btn-text element. Knowing this we can target that element to update the text:

$('#test-btn').find('.ui-btn-text').text('New Text!');

Here is a demo: http://jsfiddle.net/qp3uF/

Update

Since there are several types of buttons you could be talking about, here is how to update the text for each:

//<a>
$('a').find('.ui-btn-text').text('New Text');

//<input type="button" /> and <input type="submit" />
$('input[type="button"], input[type="submit"]').val('New Text').prev('.ui-btn-inner').children('.ui-btn-text').text('New Text');

//<button>
$('button').prev('.ui-btn-inner').children('.ui-btn-text').text('New Text');

Here is a demo: http://jsfiddle.net/qp3uF/2/