动态更新/显示HTML上的内容

Question

我最近完成了关于Codecademy的Javascript课程。其中一个任务是创建一个选择你自己的冒险程序。该程序非常基础，现在完成课程后，我正在寻找优化其性能的方法。我想做的是，不使用提示符，而是使用输入文本框，甚至是“是/否”按钮。问题是，我不想让故事的每个部分都有一堆单独的HTML文件。是否可以基于用户如何回答问题来动态地更新/显示HTML页面上的内容。这可以用简单的Javascript或jQuery来完成吗？

var troll = prompt("You're walking through the forest, minding your own business, and you run into a troll! Do you FIGHT him, PAY him, or RUN?").toUpperCase();

switch(troll) {
    case 'FIGHT':
        var strong = prompt("How courageous! Are you strong (YES or NO)?").toUpperCase();
        var smart = prompt("Are you smart?").toUpperCase();
        if(strong === 'YES' || smart === 'YES') {
            console.log("You only need one of the two! You beat the troll--nice work!");
        } else {
            console.log("You're not strong OR smart? Well, if you were smarter, you probably wouldn't have tried to fight a troll. You lose!");
        }
        break;
}

Answer 1

到目前为止，您的javascript进度做得很好。

是否可以动态更新/显示

页面上的内容

是。使用这些5函数，您可以获得很大的帮助

• document.createElement(); (http://developer.mozilla.org/en-US/docs/Web/API/Document/createElement)
• document.createTextNode(); (http://developer.mozilla.org/en-US/docs/Web/API/Document/createTextNode)
• [ELEMENT].setAttribute(); (http://developer.mozilla.org/en/docs/Web/API/Element/setAttribute)
• [NODE].appendChild(); (http://developer.mozilla.org/en/docs/Web/API/Node/appendChild)
• [NODE].insertBefore(); (http://developer.mozilla.org/en-US/docs/Web/API/Node/insertBefore)

Answer 2

将文本移动到div，然后根据需要使用隐藏/显示零件：

var div1 = document.getElementById("div1");
var div2 = document.getElementById("div2");
if(strong === 'YES' || smart === 'YES') {
    div1.style.display = 'block';        
    div2.style.display = 'none';
} else {
    div1.style.display = 'none'; 
    div2.style.display = 'block';
}