DOM Nodes Adding, Deleting, Alerts

Question

So a little lost here, I'm not sure how to approach this, I've done the HTML and CSS but not sure how to do it in JS.

My HTML:

<!doctype html>
<html lang="en">
<head>
    <title> Task 1 </title>
    <meta charset="utf-8">
    <script src="DomNodes.js"></script>
    <style>
    #output {
        border: blue 5px solid;
        padding: 10px;
        margin-bottom: 10px;
        margin-top: 10px;
        width: 50%;
    }
    #output p {
        padding:10px;
        border: black 1px dashed;
    }
    </style>
</head>
<body>
    <h2> TASK 3 - Creating, Appending and Deleting Nodes in the DOM Tree </h2>
    <p> Type in text below, click add to add as paragraph. <button id="add"> ADD </button> </p>

    <textarea id  ="input" rows="10" cols="60">
    </textarea><br>

    <button id="delete">Delete Last Paragraph</button>
    <br><br>
    <h2> Added Paragraphs </h2>

    <div id="output">
    </div>
</body>
</html>

Answer 1

This is the code with little explain

 <!doctype html> <html lang="en"> <head> <title> Task 1 </title> <meta charset="utf-8"> <!--<script src="DomNodes.js"></script>--> <script> function myFunction() { //get input user var userInput=document.getElementById("input").value; //clean text area document.getElementById("input").value=""; //create paragraph var para = document.createElement("p"); //assign value ->user input var node = document.createTextNode(userInput); //assign text at paragraph para.appendChild(node); //assign paragraph at div tag var element = document.getElementById("output"); element.appendChild(para); } function remove_LastChild() { //get div output var select = document.getElementById('output'); //control if there are child into output div if (select.childElementCount>0){ //select last paragraph and remove it select.removeChild(select.lastChild); } else{ alert("Tehere are not paragraph!"); } } </script> <style> #output { border: blue 5px solid; padding: 10px; margin-bottom: 10px; margin-top: 10px; width: 50%; } #output p { padding:10px; border: black 1px dashed; } </style> </head> <body> <h2> TASK 3 - Creating, Appending and Deleting Nodes in the DOM Tree </h2> <p> Type in text below, click add to add as paragraph. <button id="add" onclick="myFunction()"> ADD </button> </p> <textarea id ="input" rows="10" cols="60"> </textarea><br> <button id="delete" onclick="remove_LastChild()">Delete Last Paragraph</button> <br><br> <h2> Added Paragraphs </h2> <div id="output"> </div> </body> </html>

I hope this hel you

DOM Nodes Adding, Deleting, Alerts

Question

1 answers

solution1
0 ACCPTED 2018-10-29 07:55:24

DOM Nodes Adding, Deleting, Alerts

Question

1 answers

solution1 0 ACCPTED 2018-10-29 07:55:24

solution1
0 ACCPTED 2018-10-29 07:55:24