动态元素内的Javascript动态元素答案

【问题标题】：Javascript dynamic element inside dynamic element动态元素内的Javascript动态元素
【发布时间】：2014-04-02 09:22:07
【问题描述】：

我正在尝试在动态创建的 div 中添加一个动态创建的元素（使用 document.createElement('span')）。

这是我的代码：

// Newplayer div holder
var newPlayer = document.createElement('div');
newPlayer.setAttribute('id', 'player_' + playerID);
newPlayer.setAttribute('class', 'player_entry');
newPlayer.setAttribute('style', 'background-color: ' + getRandomColor());

// Points holder
var playerTotalPointsHolder = document.createElement('div');
playerTotalPointsHolder.setAttribute('id', 'player_' + playerID + "_total_holder");
playerTotalPointsHolder.setAttribute('class', 'player_total_holder');

var playerTotalPoints = document.createElement('span');
playerTotalPoints.setAttribute('id', 'player_' + playerID + "_total");
playerTotalPoints.setAttribute('class', 'player_total');
playerTotalPoints.innerHTML = 0;

// Put the pieces together
playerTotalPointsHolder.innerHTML = "Total: " + playerTotalPoints;

但是输出是：

Playername [object HTMLDivElement]

所以我的问题是，如何在元素内插入元素？

【问题讨论】：

标签： javascript dynamic elements

【解决方案1】：

playerTotalPointsHolder.innerHTML = "Total: ";
playerTotalPointsHolder.appendChild(playerTotalPoints);

【讨论】：

【解决方案2】：

尝试更改此行：

playerTotalPointsHolder.innerHTML = "Total: " + playerTotalPoints;

到这里：

playerTotalPointsHolder.appendChild(
  document.createTextNode('Total: ')
);
playerTotalPointsHolder.appendChild(
  playerTotalPoints
);

【讨论】：

成功了，谢谢。但是创建一个文本节点而不是仅仅插入一个字符串的努力是什么？
@Mathlight 更加一致，并且在兄弟元素存在时不会破坏它们。您的具体情况没有实际优势。
好的，谢谢你的解释。由于部分内容一致，我会接受您的回答。
@Mathlight 我同意 sabof，通常不鼓励直接更改 innnerHTML（例如参见 "Security considerations" here）

【解决方案3】：

您需要为此使用appendChild：

// Setting total score...
playerTotalPoints.innerHTML = "Total: " + 0;

// And pushing `span` to `div`
playerTotalPointsHolder.appendChild(playerTotalPoints);

使用playerID 1，这将产生以下 HTML：

<div id="player_1_total_holder" class="player_total_holder">
   <span id="player_1_total" class="player_total">Total: 0</span>
</div>

但是，我建议不要使用span，而是使用p 作为文本段落。但即便如此，同样的原则也适用于将元素推入元素。

【讨论】：

【解决方案4】：

您创建了元素，但没有将它们附加到 DOM 中的任何位置。您需要在代码末尾执行以下操作：

playerTotalPointsHolder.appendChild(playerTotalPoints);
newPlayer.appendChild(playerTotalPointsHolder);
someDOMElementInYourDocument.appendChild(newPlayer);

【讨论】：

请提供一些描述