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

Question

我最近完成了 Codecademy 上的 Javascript 类(class)。其中一项任务是创建一个选择你自己的冒险计划。该程序非常基础，现在完成类(class)后，我正在寻找优化其性能的方法。我想做的是，不使用提示，而是使用输入文本框甚至“是/否”按钮。问题是我不希望故事的每个部分都有一堆单独的 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 进展顺利。

Is it possible to dynamically update/display the content on the HTML page

是的。您可以通过以下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 )