how to change the text of an h1 with an input button without losing the button

Question

I have an h1 tag with a button and some text to it's right that only displays after a user action at runtime using CSS and jQuery. When the button is displayed I want to put text next to it in the h1.

The problem is that when I add the text, I lose the button.

The HTML loooks like this...

<h1>
    <input type="button" value="Open Document In New Window" id="newTabButton" class="tabButtonHidden">
</h1>

The CSS looks like this...

.tabButtonHidden {
   visibility: hidden;
}

.tabButtonVisible {
   visibility:visible;
}


#newTabButton {
    background: rgba(216, 216, 216, 6);

}

h1 {
    font: 100% Arial, Arial, Helvetica, sans-serif;
    font-size: 1.25em;
    font-weight:500;    
    background: rgba(218, 235, 245, 6);
    margin: 0px;
}

The jQuery looks like this...

if ($("#newTabButton").hasClass("tabButtonHidden")) {
   $('#newTabButton').removeClass("tabButtonHidden").addClass("tabButtonVisible");
}

$('h1').text('Now is the time for all good men...');

The last line in the jQuery writes the text where the button would normally be. If I remove that last line, change the html to include the text as follows, the jquery works perfectly, except of course that the text is static and always visible...

<h1>
    <input type="button" value="Open Document In New Window" id="newTabButton" class="tabButtonHidden">Now is the time for all good men...
</h1>

What am I missing? I need to change the text and make it and the button visible all dynamically.

Thanks for any help.

Answer 1

Use append() instead of text()

http://jsfiddle.net/efortis/QSEfv/

$('h1').append('Now is the time for all good men...');​

Edit

To prevent appending multiple times, append a span into the h1 and use text()

See: http://jsfiddle.net/efortis/QSEfv/2/

$('h1').append('<span>Now is the time for all good men...</span>');

$('input').on('click', function () {
   $('h1 span').text('NEW...');    
});​