Question

I have a text area (from which I take a number) and button to submit the value, and I’m trying to add content to a paragraph that is generated by this loop:

var countNum = document.getElementById(num).value;
var entNum = parseInt(countNum);

for(i=1;i<=entNum;i++){
    if(i%3!==0 && i%7!==0){
       document.write(i + "<br>");
    }
}

now when i use document.write of course the whole previous content is overwritten, but I want to have a paragraph under the button, that receives the generated numbers from the loop and them. What’s the right way to do it ?

Answer 1

Lets assume you have a container below your button, where you’ll put your stuff in:

<button [...] />
<div id="myContainer"></div>

Then you can fill the container by calling

var myContainer = document.getElementById("myContainer");
var paragraph = document.createElement("p");
paragraph.appendChild(document.createTextNode("YourNumberOrTextHere"));
myContainer.appendChild(paragraph);

You’ll find out the rest! 😉

---

EDIT:
Following your comment, the following addition:

To remove an element, you’ll need a reference to it.

By ID:

//Create element and give it a unique ID
var paragraph = document.createElement("p");
paragraph.id = "element1";
//Now you can get it like this
var paragraph = document.getElementById("element1");

By TagName:

//Request all elements with a certain tag name
var paragraphs = document.getElementsByTagName("p");
//or only those of our container:
var paragraphs = document.getElementById("myContainer").getElementsByTagName("p");
//Now you can mess with all of them like this:
var paragraph = paragraphs[0]

By Reference:

//Just reuse the variable you used when you created your element
var paragraph = document.createElement("p");
//use paragraph

More to find out:

;)

NOW: Removing it:

You have to tell the parentContainer that it should remove a child element. Fortunately, each element saves a reference to its parent:

paragraph.parentElement.removeChild(paragraph);