Creating text elements in JS

Question

I have a div that is dynamically created in my JS. Everything works except the line breaks. Am I appending them incorrectly?

var reminderDiv = document.getElementById('reminderDiv');

var h2 = document.createElement('h2');
var reminderName = document.createTextNode(item.name);
h2.appendChild(reminderName);

var reminderDetails = document.createElement('p');
var br = document.createElement('br');
var reminderOccasion = document.createTextNode('Occasion: ' + item.occasion);    
var reminderLastGift = document.createTextNode('Last Gift:' + item.lastgift);   
var reminderPrefGift = document.createTextNode('Preferred Gift:' + item.prefgift);
reminderDetails.appendChild(reminderOccasion);
reminderDetails.appendChild(br);
reminderDetails.appendChild(reminderLastGift);
reminderDetails.appendChild(br);
reminderDetails.appendChild(reminderPrefGift);

You only have a single BR element here. appendChild doesn’t clone nodes, it removes the node from its current document position first. — C3roe
– C3roe, Commented Apr 9, 2018 at 14:54

Quentin · Accepted Answer · 2018-04-09 14:54:21Z

5

Everything works except the line breaks

Line break: Singular.

You only create one. You then append it twice. So it gets appended after reminderOccasion and then again after reminderLastGift (which removes it from its previous position).

answered Apr 9, 2018 at 14:54

Quentin

949k136 gold badges1.3k silver badges1.4k bronze badges

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

2 Comments

megler Over a year ago

Thanks. That makes total sense. If I want multiple breaks, is there a cleaner way to do it than 3 variables each creating a line break?

Quentin Over a year ago

Reuse the same variable (but assign it a new value!) or don't use a variable at all.

Giacky · Accepted Answer · 2018-04-09 15:04:11Z

0

The problem with your code is you're inserting the same element over and over again. You should create new <br> tag each time when you will append it.

edited Apr 9, 2018 at 15:04

answered Apr 9, 2018 at 14:54

Giacky

1811 silver badge10 bronze badges

Collectives™ on Stack Overflow

Creating text elements in JS

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related