Jump to content
Please Use CODE Tags

constantly adding a new element with js

Zuccers
By Zuccers
in Programming
 Share
Posted 
//we have a button
<button onclick = "myFunction">Generate</button>
//we have a function
function myFunction() {
//this function needs to add a new <p> element, so that once we click the button, we generate a <p id = "demo"></p> element

How would we do that, can anyone help me write this function i'm new to JS :)
Thanks in advance,

Zuccers

Link to comment
Share on other sites
Link to post
Share on other sites
Posted
22 hours ago, Zuccers said: 

//we have a button
<button onclick = "myFunction">Generate</button>
//we have a function
function myFunction() {
//this function needs to add a new <p> element, so that once we click the button, we generate a <p id = "demo"></p> element

How would we do that, can anyone help me write this function i'm new to JS :)
Thanks in advance,

Zuccers

use createElement

https://developer.mozilla.org/en-US/docs/Web/API/Document/createElement

Link to comment
Share on other sites
Link to post
Share on other sites
Posted
  • Author
25 minutes ago, elpiop said:

use createElement

https://developer.mozilla.org/en-US/docs/Web/API/Document/createElement

Yes, we're half way, but i guess this would be inpossible, because we would overwrite, i.e. we create an element "demo1" and after that we would need to create another element, so we would have to introduce a loop for it to add 1 num or something, because we would write the function twice to an existing element...

Link to comment
Share on other sites
Link to post
Share on other sites
Posted

The most basic way would just be to check for the first missing element. That is, "Does demo_0 exist? No, okay I'll make it". Next press it looks, checks "demo_0" and see that it exists, so tries "demo_1" and so on.

  

<!DOCTYPE html>
<meta charset="utf-8" />
<html>

<body>

    <button onclick="myFunction()">Gen</button>

    <script>
        function myFunction() {
            let id = 0 // Lets start from demo_0
            
            // Try demo_0, demo_1 etc until we find a missing one.
            // Once we do, add a new <p> element with id demo_${id}.
            while (true) {
                let currentElem = document.getElementById(`demo_${id}`)
                
                // If the element was null, it didn't exist!
                // So lets make it, then add it to the page.
                // Finally, break so we leave this loop so we
                // only add 1 element on each click.
                if (currentElem == null) {
                    let newDemo = document.createElement("p")
                    newDemo.setAttribute("id", `demo_${id}`)
                    document.body.appendChild(newDemo)
                    break
                }

                // Otherwise, we didn't find it.
                // Lets increase the id and check again.
                id++
            }
        }
    </script>

</body>

</html>

 

That is, have a loop where we look for demo_0, demo_1, demo_2 ....etc until we find the first missing one. Then add that missing one and stop.

CPU: 6700k GPU: Zotac RTX 2070 S RAM: 16GB 3200MHz  SSD: 2x1TB M.2  Case: DAN Case A4

Link to comment
Share on other sites
Link to post
Share on other sites
Posted
On 7/6/2019 at 6:10 AM, WiiManic said:

The most basic way would just be to check for the first missing element. That is, "Does demo_0 exist? No, okay I'll make it". Next press it looks, checks "demo_0" and see that it exists, so tries "demo_1" and so on.

  


<!DOCTYPE html>
<meta charset="utf-8" />
<html>

<body>

    <button onclick="myFunction()">Gen</button>

    <script>
        function myFunction() {
            let id = 0 // Lets start from demo_0
            
            // Try demo_0, demo_1 etc until we find a missing one.
            // Once we do, add a new <p> element with id demo_${id}.
            while (true) {
                let currentElem = document.getElementById(`demo_${id}`)
                
                // If the element was null, it didn't exist!
                // So lets make it, then add it to the page.
                // Finally, break so we leave this loop so we
                // only add 1 element on each click.
                if (currentElem == null) {
                    let newDemo = document.createElement("p")
                    newDemo.setAttribute("id", `demo_${id}`)
                    document.body.appendChild(newDemo)
                    break
                }

                // Otherwise, we didn't find it.
                // Lets increase the id and check again.
                id++
            }
        }
    </script>

</body>

</html>

 

That is, have a loop where we look for demo_0, demo_1, demo_2 ....etc until we find the first missing one. Then add that missing one and stop.

While true add elements to the dom, what could possible go wrong. XD

Link to comment
Share on other sites
Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing Programming

×