在 createTextNode() 中使用变量而不是字符串答案

【问题标题】：use variable instead of string in createTextNode()在 createTextNode() 中使用变量而不是字符串
【发布时间】：2021-01-23 18:50:01
【问题描述】：

我正在尝试通过 Javascript 向 ul 添加另一个 li。我希望 li 根据现有变量具有动态内容。我可以让它使用字符串附加一个 li 没问题。只有当我使用变量时才会出错

//Adding to List
listOfPlayers.style.display = "block";
var node = document.createElement("LI");
var textnode = document.createTextNode(playerInput.value);
node.appendChild(textnode);
listOfPlayersNumerated.appendChild(node);

问题在于：

var textnode = document.createTextNode(playerInput.value);

我尝试了一个文字字符串（如下所示），它没有问题

var textnode = document.createTextNode("New Player");

【问题讨论】：

你在哪里声明playerInput.value？
什么是playerInput.value？
var x = 'hello'; document.createTextNode(x); 如果将其粘贴在控制台中，则可以正常工作。所以这表明您使用的变量有问题。
我在 Codepen 上试了一下，效果很好。我认为您在这里遇到了不同的问题。
我声明 playerInput.value 高一点 var playerInput = document.getElementById("playerInput"); @dwosk @VLAZ

标签： javascript dynamic html-lists appendchild createtextnode

【解决方案1】：

所以我改变了它，这样你就可以看到变量的来源......

顶部：

var inputPlayer = document.getElementById("inputPlayer");

然后我只需添加 .value 即可获得下面输入的值：

//Adding to List
listOfPlayers.style.display = "block";
var playerName = playerInput.value;
console.log(playerName);
var node = document.createElement("LI");
var textnode = document.createTextNode(playerName);
node.appendChild(textnode);
listOfPlayersNumerated.appendChild(node);

它会在控制台中记录它，但它不会出现在 ul 上

【讨论】：

【解决方案2】：

好的，我相信它不喜欢这个范围。尽管在控制台中打印出变量。我搬家了

var playerName = playerInput.value;

向上和退出当前功能。奇怪的是 console.log() 会接受它，但 .createTextNode() 在那个范围内不会接受

因此，通过移动在函数外部声明新变量的位置，它似乎解决了问题

【讨论】：