如何在不丢失按钮的情况下使用输入按钮更改h1的文本

Question

我有一个带有按钮的h1标签和一些正确的文本,只有在运行时用户操作后才能使用CSS和jQuery显示.当显示按钮时,我想在h1旁边放置文本.

问题是,当我添加文本时,我丢失了按钮.

HTML就像这样......

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

CSS看起来像这样......

.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看起来像这样......

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

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

jQuery中的最后一行将文本写入按钮通常所在的位置.如果我删除最后一行,更改html以包含如下文本,jquery完美地工作,当然除了文本是静态的并且始终可见...

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

我错过了什么？我需要更改文本并使其和按钮全部动态可见.

谢谢你的帮助.

Answer 1

用append()而不是text()

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

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

编辑

要防止多次追加,请附加span到h1并使用text()

请参阅: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...');    
});?