Question

JavaScript DOM - for 循环将 li 添加到 HTML

2021-11-07

939

javascript html for-loop dom

我有包含元素的 index.html 文件

<li id="network"></li>

和包含 for 循环的 Javascript 文件

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

我希望每个循环都有新的 li 元素，像这样

first line
second line
third line
4th line

但我得到的都是一行

first line second line third line 4th line

我该如何实现？

完整代码：

document.querySelector('form').addEventListener('submit', function(e) {
  e.preventDefault();
  const ip = document.getElementById('ipAddr').value;
  const hosts = document.getElementById('hostNumber').value;
  //const ip = "10.30.100.5"; // 192.168.116.0
  const ipAddr = ip.split("."); // 192,168,116,0
  //const hosts = 50; // 30
  const subnetDescNumbers = [128, 64, 32, 16, 8, 4, 2, 1]; // 0 1 2 3 4 5 6 7 

  let defaultSubnet = '255.255.255.'
  let prefix;
  let bitsForHosts;
  let decNumber = 0;
  let newSubnet;
  let jumps;
  let lastnumber = 0;

  var nameInput = document.getElementById('ipAddr');

  let bitsForSubnet = Math.ceil(Math.log2(hosts)); // 5
  //console.log(`bitsForSubnet = ${bitsForSubnet}`);


  bitsForHosts = 8 - bitsForSubnet; // 3
  //console.log(`bitsForHosts = ${bitsForHosts}`);


  prefix = 24 + bitsForHosts; // 27
  //console.log(`prefix = ${prefix}`);


  let usableSubnets = Math.pow(2, bitsForHosts); // 8
  //console.log(`usableSubnets = ${usableSubnets}`);

  for (let i = 0; i < bitsForHosts; i++) {
    decNumber = subnetDescNumbers[i] + decNumber; // 224
  }

  newSubnet = defaultSubnet + decNumber; // 255.255.255.224
  //console.log(`New Full Subnet ${newSubnet}`);

  jumps = 256 - decNumber;
  //console.log(`Jumps : ${jumps}`);

  console.log(`Network Address : ${ip}/${newSubnet}\nPrefix: /${prefix}`);


  const info = [0, 0]
  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;
    }
  }
});

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Subneting</title>
</head>

<body>
  <main>
    <header class="header-banner" id="io0e">
      <link rel="stylesheet" href="style.css" />
      <div class="container-width" id="i6my">
        <div class="logo-container" id="izpo">
        </div>
        <div class="lead-title" id="i8n65">Subneting
          <br/>
        </div>
        <div class="sub-lead-title" id="iyaen">Get Subnet mask from IP address and requirement hosts
          <br/>
        </div>
      </div>
    </header>
    <form class="form" id="ixntd1">
      <div class="form-group" id="isbg5v">
        <label class="label" id="i1808a">IP Address</label>
        <input placeholder="Enter Ip Adress" class="input" id="ipAddr" />
      </div>
      <div class="form-group">
        <label class="label" id="iiemwf">Number of Requested Hosts</label>
        <input placeholder="" class="input" id="hostNumber" />
      </div>
      <div class="form-group">
        <button type="submit" class="button" id="submit_btn">Send</button>
      </div>
      <li id="network"></li>
    </form>

  </main>
  <script src="app.js"></script>
</body>

</html>

Answer 1

您不能创建列表或任何其他类似的 dom 元素。您必须使用 innerHTML 或 appendChild 来实现此目的。

首先创建一个 ul 而不是 li ，因为 ul 标签是 li 的容器。

<ul id="network"></ul>

然后只需更改 ul 的内部 html 即可添加新的 li 标签。

document.getElementById('network').innerHTML += "<li>Network " + ipAddr[0] + "</li>";

顺便说一下，选择 dom 元素的开销很大，因此我建议您选择元素一次并从变量中使用它们，例如：

const networkElement = document.getElementById('network');

另外还有一个提示：您可能想使用 appendChild 或 insertAdjacentHTML 函数，而不是使用 innerHTML 重建 dom。