Question

在这里有些迷失了，我不确定如何实现，我已经完成了HTML和CSS，但是不确定如何在JS中实现。

我的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

这是很少解释的代码

<!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>

我希望这能帮助您

DOM节点添加，删除，警报

1 个答案: