add paragraph element

by trentHarlem

HTML

<div id='content'>
<!--   <p id='p1'>
  </p> -->
</div>

CSS

*{
  background: slategray;
  font: 1.1em system-ui;
  /* text-align: center; */
}
p {
  counter-increment: myIndex;
}

p::before {
  color:purple;
  content: '•'counter(myIndex)'. ';
}
.test {
  color: whitesmoke;
  font-weight: 200;
}

JavaScript

function addParagraphs() {

  for (let i = 0; i < 10; i++) {

    let output = document.getElementById('content');
    let newParagraph = document.createElement('P');
    // add two classes to new paragraph
    // one of which is Unique 
    newParagraph.setAttribute("class", `test newLine_${i}`);

    output.appendChild(newParagraph);
    addTextNode('added with function', i)

  }
}

addParagraphs();

function addTextNode(text, i) {

  let newtext = document.createTextNode(text)
  //p1 = document.getElementById("p1");
  //pizz = document.getElementsByTagName("P");
  pizz = document.getElementsByClassName(`test`);
  //pizz = document.querySelectorAll("p");

  //p1.appendChild(newtext);
  pizz[i].appendChild(newtext);
}