Creating DOM elements removed to replace

Creating elements: document.createElement ( 'To create a tag name')

The element (child) to another element (the parent) in which: the element (parent) the appendChild ( 'child').

The element (child) is inserted into another element (another child) in front: the element (the element is inserted into the parent) insertBefore (new element is inserted, is inserted into the element)

Alternatively child nodes: elements (parent node being replaced) The replaceChild (new child node, the child node to be replaced).

Removes the child node: elements (parent delete elements) removeChild (elements to be deleted).

Case Description:

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
<style type="text/css">
div{width: 500px;margin: 20px auto;}
h4{border-bottom: 2px solid #000;line-height: 30px;}
ul{border: 1px solid #ccc;}
li{list-style: none;}
.li1{height: 50px;line-height: 50px;}
.delete{float: right;}
p{font-style: italic;}
textarea{width: 100%;height: 100px;resize: none;padding: 0;}
input{width: 100%;height: 50px;font-size: 16px;}
</style>
</head>
<body>
  <div id="box">
    <h4>留言内容：</h4>
    <ul>
      <li class="li1">请输入内容......</li>
    </ul>
    <textarea></textarea>
    <input type="button" value="发表留言">
  </div>
<script type="text/javascript">
    var box = document.getElementById('box');
    var Ul = box.getElementsByTagName('ul')[0];
    var li1 = Ul.getElementsByClassName('li1')[0];
    var button = box.getElementsByTagName('input')[0];
    var Tex = box.getElementsByTagName('textarea')[0];
    button.onclick = Function () {
       IF (Tex.value == '' || / ^ \ S * $ / .test (Tex.value)) { 
        Alert ( "Please enter Content ......" ); 
      } the else {
         var STR = Tex.value;
         IF (Ul.children [0] == .className 'in Li1' ) { 
          Ul.innerHTML = '' ; 
        } 
        // Create element 
        var of Li = document.createElement ( 'Li' );
         // element is added to the contents 
        Li.innerHTML = STR;
         // add another element to element 
        Ul.appendChild (of Li);
         var oA = document.createElement('a');
        oA.href = 'javascript:;';
        oA.innerHTML = '删除';
        oA.className = 'delete';
        oA.onclick = function(){
          //删除元素
          this.parentNode.remove(this.parentNode);
          if(!Ul.children[0]){
            Ul.appendChild(li1);
          } 
        }
        Li.appendChild(oA);
      }
      Tex.value = '';
    }
  </script>
</body>
</html>

Creating DOM elements removed to replace

Guess you like