How to change h1 text using enter button without losing a button

Question

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

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

HTML looks like this:

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

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; } 

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 jQuery records the text in which the button will usually be. If I delete this last line, change the html to include the text as follows, jquery works fine, except 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 is 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 adding multiple times add span to 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...'); });​ 

Answer 2

if you want to change the text of your button, you can try:

 $("#inputTabButton").val('your text'); 

or if you want to add text and a button, you can try:

 $("h1").append('your text');