InnerHTML附加项，而不是替换项

Question

I'm trying to make a palindrome script and it's actually "working". I want to make a improvement. I want the input value append on my "output" div.

here are my fiddle http://jsfiddle.net/vitorboccio/8yh1u0t7/

any hints ? I dont want to use Jquery ! Thanks!

(function () {
"use strict";

var output = document.getElementById("output"),
    statusLine = document.getElementById("status"),
    phrase = document.getElementById('phrase'),
    testButton = document.getElementById("testButton"),
    //palindromeText = document.getElementById("palindrome"),
    characterCheck = document.getElementById("characterCheck"),
    ignoreSpecialCharacters = false,
    ignoreSpaces = false;

function setMessage(palindrome) {
    if (palindrome) {
        output.innerHTML = phrase.value + ' ' + "é palindroma";
    } else {
        output.innerHTML = phrase.value + ' ' + "não é a palindroma";
    }
}

function checkForPalindrome(string) {
    var palindrome = true,
        right = string.length - 1,
        left = 0;

    if (!string || string.length < 1) {
        // 0 characters
        return false;
    }

    while (left < right && palindrome) {
        palindrome = string.charAt(left) === string.charAt(right);
        left++;
        right--;
    }

    return palindrome;
}

function executeTest() {
    var string = phrase.value,
        cleanString;

    cleanString = string;

    if (ignoreSpaces) {
        //ignores whitespaces only;
        cleanString = string.replace(/\s+/g, '');
    }

    if (ignoreSpecialCharacters) {
        //ignores punctuation and white space (controversial).
        cleanString = string.replace(/[A-Z0-9]/ig, '');
    }

    if (checkForPalindrome(cleanString)) {
        setMessage(true);
        palindromeText.innerHTML = '"' + string + '"';
    } else {
        setMessage(false);
    }
}

function executeOnEnter(e) {
    if (e.keyCode === 13) {
        executeTest();
//            phrase.blur();
    }
}

//resets the form to state 1
function resetForm() {
    output.innerHTML = "";
    //statusLine.innerHTML = "Waiting";
    statusLine.style.color = "green";
    phrase.value = "";
}

function charIgnoreChanged(e) {
    ignoreSpecialCharacters = e.target.checked;
}

function spaceIgnoreChanged(e) {
    ignoreSpaces = e.target.checked;
}

phrase.addEventListener('keydown', executeOnEnter);
testButton.addEventListener('click', executeTest);
characterCheck.addEventListener('change', charIgnoreChanged);
spaceCheck.addEventListener('change', spaceIgnoreChanged);

}());

Answer 1

You can append to the div by keeping the original innerHTML like this:

output.innerHTML = output.innerHTML + "<br />" + phrase.value + ' ' + "é palindroma";

or shorter:

output.innerHTML += "<br />" + phrase.value + ' ' + "é palindroma";

Answer 2

You just need to modify setMessage

 function setMessage(palindrome) {
    if (palindrome) {
        output.innerHTML += phrase.value + ' ' + "é palindroma<br />";
    } else {
        output.innerHTML += phrase.value + ' ' + "não é a palindroma<br />";
    }
    // for user convenience, clear the textbox and give it focus 
    phrase.value = '';
    phrase.focus();
 }

Fiddle