javascript - DOM Nodes Adding, Deleting, Alerts

Question

Welcome To Ask or Share your Answers For Others

javascript - DOM Nodes Adding, Deleting, Alerts

posted Jan 31, 2022 in Technique[技术] by 深蓝 (71.8m points)

javascript - DOM Nodes Adding, Deleting, Alerts

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>

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…

1 Reply

深蓝 · Answer 1 · 2022-01-31T07:16:06+0000

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>

Categories

javascript - DOM Nodes Adding, Deleting, Alerts

javascript - DOM Nodes Adding, Deleting, Alerts

Please log in or register to add a comment.

Please log in or register to reply this article.

1 Reply

Please log in or register to add a comment.

Just Browsing Browsing

Most popular tags