常用元素操作方法

作者: 王远清orz | 来源:发表于2019-10-21 16:41 被阅读0次

<body>
  <input type="button" id="btn" value="按钮">
  <ul id="ul">
    <li>111</li>
    <li>222</li>
    <li>333</li>
  </ul>

  <ul id="sel"></ul>
  <script>
    // createElement()
    // appendChild()
    // removeChild()

    // 把元素插入到页面指定位置
    // insertBefore()
    //把当前元素的标签替换
    // replaceChild()

    var btn = document.getElementById('btn');
    btn.onclick = function () {
      var li = document.createElement('li');
      li.innerHTML = 'abc';
      
      var ul = document.getElementById('ul');
      // 在第一个li前面插入li
      // ul.insertBefore(li,ul.children[0]);

      //将第一个li替换
      // ul.replaceChild(li,ul.children[0]);


      // 将第一个ul中的第一个li添加到第二个ul中
      var sel = document.getElementById('sel');
      sel.appendChild(ul.children[0]);
    }
  </script>
</body>