How to add a line break in a linked .js file when & \n aren't working

Question

I am trying to add line breaks in a for-loop in a stand alone .js file, linked to a HTML.

I have my variable set to an array with 3 objects inside. I want my for-loop to run once, then print the values on a new line in my browser using document.write. However, when I run my loop, all 3 objects are displayed in 1 single line instead of an actual list. I have tried using <br> & \n to add line breaks, but when I do, the text in my browser disappears. What am I doing wrong here?

let pokemonList = [{
    name: 'caterpie ',
    height: 0.3,
    types: ['bug', 'electric']
  },
  {
    name: 'sandslash ',
    height: 1,
    type: ['ground']
  },
  {
    name: 'meowth ',
    height: 0.4,
    type: ['normal']
  },
]

for (let i = 0; i < pokemonList.length; i++) {
  document.write(pokemonList[i].name + 'height: ' + pokemonList[i].height);
}

Answer 1

Using, document.write just writes plain strings to your html code.

Wrap your item inside a div and since divs are block elements, they will automatically go to the next line.

Run the below snippet.

let pokemonList = [{
    name: 'caterpie ',
    height: 0.3,
    types: ['bug', 'electric']
  },
  {
    name: 'sandslash ',
    height: 1,
    type: ['ground']
  },
  {
    name: 'meowth ',
    height: 0.4,
    type: ['normal']
  },
]

for (let i = 0; i < pokemonList.length; i++) {
  document.write("<div>" + pokemonList[i].name + 'height: ' + pokemonList[i].height + " </div>");
}

Answer 2

You could use template literals to make it easier to read.

let pokemonList = [{
    name: 'caterpie ',
    height: 0.3,
    types: ['bug', 'electric']
  },
  {
    name: 'sandslash ',
    height: 1,
    type: ['ground']
  },
  {
    name: 'meowth ',
    height: 0.4,
    type: ['normal']
  },
]

for (let i = 0; i < pokemonList.length; i++) {
  document.write(`${pokemonList[i].name} height: ${pokemonList[i].height}<br/>`);
}

Answer 3

you will need to add a few more line of code inside that for loop

//Step 1
const testElement = document.querySelector('div');
// Here you select the PokenmonList as your parent using the querySelector 

//Step 2
const lineBreak = document.createElement('br'); //Create a new BR element 

//Step 3
testElement.appendChild(lineBreak);
//then add the newly created br element to the pokenmonlist

Since I am unsure how your HTML looks like i am giving you a generalized way to append the child to your dynamic html

Answer 4

Do it like this:

    let pokemonList = [{
           name: 'caterpie ',
           height: 0.3,
           types: ['bug', 'electric']
         },
         {
           name: 'sandslash ',
           height: 1,
           type: ['ground']
         },
         {
           name: 'meowth ',
           height: 0.4,
           type: ['normal']
         },
       ]

       for (let i = 0; i < pokemonList.length; i++) {
         document.write(pokemonList[i].name + 'height: ' + pokemonList[i].height);
         document.write('<br/>');
       }