JavaScript DOM for循环添加li元素内容不换行问题咨询

问题原因 #

• HTML默认不识别普通文本中的\n换行符，所以你写的\n不会触发页面换行
• 现有逻辑是所有内容都追加到同一个<li>元素中，没有按需求生成独立的新<li>

解决步骤 #

1. 先修改HTML结构，把原来的单个<li id="network"></li>替换成用来容纳所有子网条目的列表容器：

<!-- 替换原来的<li id="network"></li> -->
<ul id="networkList"></ul>

2. 修改JS中的循环逻辑，每次循环生成独立的<li>元素，换行用<br>标签实现即可：
   把原来的循环部分：

for (let i = 0; i <= usableSubnets; i++) {
  if (lastnumber < 256) {
    document.getElementById('network').textContent += "\nNetowrk " + ipAddr[0] + "." + ipAddr[1] + "." + ipAddr[2] + "." + lastnumber + "\n";
    document.getElementById('network').textContent += "\nRange " + ipAddr[0] + "." + ipAddr[1] + "." + ipAddr[2] + "." + (lastnumber + 1) + " - " + (lastnumber + jumps - 2) + "\n";
    lastnumber += jumps;
  }
}

替换成：

// 先获取列表容器
const networkList = document.getElementById('networkList');
// 每次提交先清空之前的结果
networkList.innerHTML = '';
for (let i = 0; i <= usableSubnets; i++) {
  if (lastnumber < 256) {
    // 创建新的li元素
    const li = document.createElement('li');
    // 拼装内容，用<br>换行，顺便修正拼写错误Netowrk→Network
    li.innerHTML = `Network ${ipAddr[0]}.${ipAddr[1]}.${ipAddr[2]}.${lastnumber}<br>Range ${ipAddr[0]}.${ipAddr[1]}.${ipAddr[2]}.${lastnumber + 1} - ${lastnumber + jumps - 2}`;
    // 把li加到列表容器里
    networkList.appendChild(li);
    lastnumber += jumps;
  }
}

如果不想用innerHTML，也可以给li加white-space: pre-line样式让浏览器识别\n换行，写法如下：

const li = document.createElement('li');
li.style.whiteSpace = 'pre-line';
li.innerText = `Network ${ipAddr[0]}.${ipAddr[1]}.${ipAddr[2]}.${lastnumber}\nRange ${ipAddr[0]}.${ipAddr[1]}.${ipAddr[2]}.${lastnumber + 1} - ${lastnumber + jumps - 2}`;
networkList.appendChild(li);

两种写法都可以实现预期效果，每个子网信息独立为一个li，内部两行分别展示网络地址和地址范围。

内容的提问来源于stack exchange，提问作者ITBYD