javascript - 如何使用innerHTML显示多个输出？

Question

我在脚本中有这个函数。

function arith()
{
    var n1 = parseInt(document.getElementById('num1').value, 10);
    var n2 = parseInt(document.getElementById('num2').value, 10);
    var newVal;
    if(op == "Operation 1")
    {
        newVal1 = n1 + n2;
    }
    else if(op == "Operation 2")
    {
        newVal2 = n1 - n2;
    }
    else if(op == "Operation 3")
    {
        newVal3 = n1 * n2;
    }
    else if(op == "Operation 4")
    {
        newVal4 = n1 / n2;
    }

    var demoP = document.getElementById("demo");
    {
        demoP.innerHTML = "Operation 1=" + newVal1;
        demoP.innerHTML = "Operation 2=" + newVal2;
        demoP.innerHTML = "Operation 3=" + newVal3;
        demoP.innerHTML = "Operation 4=" + newVal4;
    }

    return false;
}

当我调用这些innerHTML时，我可以使用<p id="demo"></p>是否足够或者我需要调用每个元素？

Answer 1

innerHtml 的调用将覆盖每次调用的内容。在分配给 innerHTML 属性之前，在 String 中构建 HTML。

var demoP = document.getElementById("demo");
{
                    var html = "";
                    html += "Operation 1=" + newVal1 + "<br/>";
                    html += "Operation 2=" + newVal2 + "<br/>";
                    html += "Operation 3=" + newVal3 + "<br/>";
                    html += "Operation 4=" + newVal4 + "<br/>";
                    demoP.innerHTML = html;
}

JS fiddle : http://jsfiddle.net/D3xR3/