javascript - 如何居中 append 我的js并替换它

这是我的代码：http://jsbin.com/oBaMUZI/4/edit

我有2个问题。首先，如何将按钮附带的段落居中。我尝试在CSS中使用ID的“文本”和“元素”，但没有任何反应。

另外-当我按下按钮时，我希望新列表和字母替换旧列表和字母，但又不清除整个内容。谢谢

最佳答案

我会添加一个“列表目标” div，您每次都会清除它：

将此添加到您希望项目显示在底部的html中。这里的好处是，它可以放在文档中的任何位置，因此您可以移动项目的显示位置。

<div id="listHolder"></div>

然后在您的JS中，使用它代替文档：

function listAndLetter(){
     var alphabet=["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "R", "S", "T", "W" ];
var randomLetter= alphabet[Math.floor( Math.random() * 20)];

var list=[1,2,3,4,5,6];
var randomList=list[Math.floor( Math.random() * 6)];

//Get your main div element here
var parent = document.getElementById("listHolder");
var element = document.createElement('div');
var text = document.createTextNode("Your list is" + " " + randomList+ " "+ "and your letter is" + " " + randomLetter+"!");
element.appendChild(text);
//Clear the list div, and add your new data to it each time.
parent.innerHTML = "";
parent.appendChild(element);
}

然后在您的CSS中添加text-align：center-

#listHolder{
  text-align:center;
}

繁荣！奇迹般有效。

为了记录，您应该重新考虑将其称为“列表”，因为它不是...列表。它谈论的是列表，但是也许您可以将其称为程序员而不是用户，因为用户不会看您的源代码。之类的东西，例如“输出”或“输出父母”，等等。我放listHolder是因为这是您的术​​语，但最好确保将来的程序员，甚至您下线6周，也可以返回此代码并说“是的，这很有意义”。