Javascript dynamic element inside dynamic element

Question

I'm trying to add an dynamically created element ( with document.createElement('span') ) inside an dynamically created div.

This is my code:

// 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;

But the output is:

Playername [object HTMLDivElement]

So my question is, how can i insert the element inside the element?

shin · Accepted Answer · 2014-04-02 09:27:43Z

1

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

answered Apr 2, 2014 at 9:27

shin

1,6814 gold badges22 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

sabof · Accepted Answer · 2014-04-02 09:28:58Z

0

Try changing this line:

playerTotalPointsHolder.innerHTML = "Total: " + playerTotalPoints;

to this:

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

answered Apr 2, 2014 at 9:28

sabof

8,2024 gold badges32 silver badges53 bronze badges

4 Comments

Mathlight Over a year ago

That did the trick, thanks. But what's the effort of creating an textnode instead of just inserting an string?

sabof Over a year ago

@Mathlight It's more consistent, and it doesn't destroy sibling elements when they exist. There are no practical advantages for your specific case.

Mathlight Over a year ago

Alright, thanks for your explanation. I'll accept your answer because of the consistent part.

dirluca Over a year ago

@Mathlight I agree with sabof, it is usually discouraged to change innnerHTML directly (see for example "Security considerations" here)

Mauno Vähä · Accepted Answer · 2014-04-02 09:50:07Z

0

You need to use appendChild for this:

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

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

With playerID 1, this will result in the following HTML:

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

However, I suggest that instead of using span you should use p as paragraph for text. But even then, same principle applies for pushing element inside an element.

edited Apr 2, 2014 at 9:50

answered Apr 2, 2014 at 9:28

Mauno Vähä

9,7883 gold badges36 silver badges55 bronze badges

Comments

dirluca · Accepted Answer · 2014-04-02 10:37:31Z

0

You created your elements but you didn't append them anywhere in your DOM. You need, at the end of your code, do something like this:

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

edited Apr 2, 2014 at 10:37

answered Apr 2, 2014 at 9:31

dirluca

4233 silver badges12 bronze badges

1 Comment

Cris Over a year ago

please provide some description

Collectives™ on Stack Overflow

Javascript dynamic element inside dynamic element

4 Answers 4

Comments

4 Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

4 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related