<br> & \n 不工作时如何在链接的 .js 文件中添加换行符

Question

我正在尝试在链接到 HTML.

的独立 .js 文件的 for 循环中添加换行符

我将我的变量设置为一个包含 3 个对象的数组。我希望我的 for 循环运行一次，然后使用 document.write 在我的浏览器中的新行上打印这些值。但是，当我运行我的循环时，所有 3 个对象都显示在 1 行而不是实际列表中。我曾尝试使用 <br> & \n 添加换行符，但是当我这样做时，浏览器中的文本消失了。我在这里做错了什么？

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

您可以使用 template literals 使其更易于阅读。

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 2

使用 document.write 只是将纯字符串写入您的 html 代码。

将您的项目包裹在 div 中，因为 div 是 block 元素，它们将自动转到下一行。

运行下面的片段。

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 3

您需要在 for 循环中再添加几行代码

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

因为我不确定你的 HTML 看起来如何，我给你一个通用的方法来将 child 附加到你的动态 html

Answer 4

这样做：

    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/>');
       }

<br> & \n 不工作时如何在链接的 .js 文件中添加换行符

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

javascript

arrays

for-loop

line-breaks