how to change the text of an h1 with an input button without losing the button
Solution 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...');
});
Solution 2
if you want to change the text of your button you may try:
$("#inputTabButton").val('your text');
or if you want to add the text and the button you may try as well:
$("h1").append('your text');
user278859
Updated on July 23, 2022Comments
-
user278859 almost 2 years
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.