'JavaScript DOM - for loop add li to HTML

I have index.html file with the element

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

and Javascript file with for loop

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

I want to have new li element for each loop , like this

first line
second line
third line
4th line

but im getting all in one line

first line second line third line 4th line

how can i achieve that ?

FULL CODE :

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>
javascripthtmlfor-loopdom


Solution 1:[1]

You can't create list or any other dom elements like this. You'll have to use innerHTML or appendChild for this.

Create a ul first instead of li because ul tag is the container for li's.

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

And then just change the inner html of ul to add new li tags.

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

By the way selecting dom elements is expensive, so i recommend you to select elements once and use them from variable like:

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

Also a tip: instead of rebuilding the dom with innerHTML you might think to use appendChild or insertAdjacentHTML functions.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1

Related Questions