动态元素中的Javascript动态元素
我试图在动态创建的div中添加一个动态创建的元素(使用动态元素中的Javascript动态元素,javascript,dynamic,elements,Javascript,Dynamic,Elements,我试图在动态创建的div中添加一个动态创建的元素(使用document.createElement('span')) 这是我的代码: // Newplayer div holder var newPlayer = document.createElement('div'); newPlayer.setAttribute('id', 'player_' + playerID); newPlayer.setAttribute('class', 'player_entry'); newPlayer.s
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]
所以我的问题是,如何在元素中插入元素?尝试更改此行:
playerTotalPointsHolder.innerHTML = "Total: ";
playerTotalPointsHolder.appendChild(playerTotalPoints);
playerTotalPointsHolder.innerHTML = "Total: " + playerTotalPoints;
为此:
playerTotalPointsHolder.appendChild(
document.createTextNode('Total: ')
);
playerTotalPointsHolder.appendChild(
playerTotalPoints
);
为此,您需要使用:
// 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>
总数:0
但是,我建议不要使用
span
,而应该使用p
作为文本段落。但即便如此,同样的原则也适用于将元素推入元素中。您创建了元素,但没有将它们附加到DOM中的任何位置。在代码末尾,您需要执行以下操作:
playerTotalPointsHolder.appendChild(playerTotalPoints);
newPlayer.appendChild(playerTotalPointsHolder);
someDOMElementInYourDocument.appendChild(newPlayer);
这就成功了,谢谢。但是创建一个textnode而不是仅仅插入一个字符串需要付出什么努力呢?@Mathlight它更为一致,并且在兄弟元素存在时不会破坏它们。您的具体案例没有实际优势。好的,谢谢您的解释。我会接受你的答案,因为答案是一致的。@Mathlight我同意sabof的观点,通常不鼓励直接更改InnerHTML(参见示例)。请提供一些说明