Making on onClick to change text in javascript

I want to make a format like the following:

Phrase

[Button]

When the button is clicked, the 'phrase' changes and the button remains. I am able to make it so text appears, however I can not make it so the button stays. Does anyone have an ide开发者_StackOverflow中文版a of how this may be done? Thanks.

Final script

Javascript (replacement)

function displayPhrase()
{
    document.getElementById("demo").innerHTML = 'New Phrase';
}

HTML (Old phrase)

<span id="demo">Old Phrase</span>

HTML (The button)

<button type="button" onclick="displayPhrase()"></button>

Credit to above answers ^_^

Take a look at this.

I am able to make it so text appears, however I can not make it so the button stays.

My guess is you are updating the element that also contained the button element, and this update is clearing the button.

HTML

<span id="phrase"></span>
<button id="change-phrase" type="button">Change Phrase</button>

JavaScript

var button = document.getElementById('change-phrase'),
    content = document.getElementById('phrase');

button.onclick = function() {
    content.innerHTML = 'Your new phrase';
};

jsFiddle.

Use this code:

HTML:

<h1> Welcome to the </h2><span id="future-clicked"></span>

<button onclick="clicked_on()">Click for future</button>

JS:

<script>
    function clicked_on(){
        document.getElementById('future-clicked').innerHTML = 'Future World';
    }
</script>