javascript - 如何获得随机生成器结果的换行符？

Question

我一直有这样的想法:创建一个小生成器，随机选择要玩的英雄并选择 Dota 的元素。 长话短说，到目前为止，一切似乎都正常，但我不确定如何将结果放在单独的行上

脚本中可能重要的部分:

        var randomNumber1 = parseInt(Math.random() * wordlist1.length);
        var randomNumber2 = parseInt(Math.random() * wordlist2.length);
        var randomNumber3 = parseInt(Math.random() * wordlist3.length);
        var randomNumber4 = parseInt(Math.random() * wordlist4.length);
        var randomNumber5 = parseInt(Math.random() * wordlist5.length);
        var randomNumber6 = parseInt(Math.random() * wordlist6.length);
        var randomNumber7 = parseInt(Math.random() * wordlist7.length);
        var hero = "Hero:" + wordlist1[randomNumber1];
        var boots = "Boots:" + wordlist2[randomNumber2];
        var item1 = "Item1:" + wordlist3[randomNumber3];
        var item2 = "Item2:" + wordlist4[randomNumber4];
        var item3 = "Item3:" + wordlist5[randomNumber5];
        var item4 = "Item4:" + wordlist6[randomNumber6];
        var item5 = "Item5:" + wordlist7[randomNumber7];

        var finalOutput = hero + " " + boots + " " + item1 + " " + item2 + " " + item3 + " " + item4 + " " + item5;
        //var name = wordlist1[randomNumber1] + " " + wordlist2[randomNumber2] + " " + wordlist3[randomNumber3] + " " + wordlist4[randomNumber4] + " " + wordlist5[randomNumber5] + " " + wordlist6[randomNumber6] + " " + wordlist7[randomNumber7];            

        //alert(name); //Remove first to slashes to alert the name

        //If there's already a name it is removed  
        if(document.getElementById("result")){
            document.getElementById("placeholder").removeChild(document.getElementById("result"));
        }
        // A div element is created to show the generated name. The Name is added as a textnode. Textnode is added to the placeholder.
        var element = document.createElement("div");
        element.setAttribute("id", "result");
        element.appendChild(document.createTextNode(finalOutput));
        document.getElementById("placeholder").appendChild(element);
    }       
</script>

现在我得到的结果是这样的:Hero:Hero Boots:Boots Item1:Item1 等

我想要得到的是这样的:
英雄:英雄
Boot : Boot
项目1:项目1

有什么简单的方法可以实现这一点吗？

Answer 1

要在 HTML 中创建换行符，您需要创建一个
元素，或使用该标签创建段落。生成的 HTML 看起来像这样:

Hero: Hero<br/>
Boots: Boots<br/>
Item1: Item1<br/>

或

<p>Hero: Hero</p>
<p>Boots: Boots</p>
<p>Item1: Item1</p>

如果您想继续，我建议您阅读一些基本的 HTML 教程，其中有很多 Material ，例如 w3schools