DOM基础-2 createElement(),appendChild(),insertBefore()，removeChild()

最新推荐文章于 2021-04-06 14:26:41 发布

曲奇小姐

最新推荐文章于 2021-04-06 14:26:41 发布

阅读量185

点赞数

分类专栏： Javascript

本文链接：https://blog.csdn.net/weixin_41586886/article/details/80654590

版权

Javascript 专栏收录该内容

44 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>DOM基础-2</title>
    <style></style>
    <script type="text/javascript">
    window.οnlοad=function(){

      var oBtn=document.getElementById('btn1');
      var oTxt=document.getElementById('txt1');
      var oUl=document.getElementById('ul1');

      //创建一个新元素并将其显示到页面上createElement(),appendChild(),insertBefore()
      oBtn.οnclick=function(){
        var oLi=document.createElement('li');  //创建一个新的元素li
        oLi.innerHTML=oTxt.value;  //将oTxt.value填充到li
        // oUl.appendChild(oLi);
         //将新创建的li插入到页面的节点中，只有这样才能在页面中真正看到被创建的元素
        //事实上appendChild(oLi)是将新建的元素插在队列的末尾的

        //实现将新创建的的元素插入到队列的最前面
        var aLi=oUl.getElementsByTagName('li');
        if(aLi.length>0){
          oUl.insertBefore(oLi,aLi[0]); //调用格式：父级.insertBefore(待插入的元素,插在哪个元素之前)
        }
        else{
          oUl.appendChild(oLi); //调用格式：父级.appendChild(子节点)
        }
      }

      //删除已有元素 removeChild()
      var oUl1=document.getElementById('ul2');
      var aA=oUl1.getElementsByTagName('a');
      for(var i=0;i<aA.length;i++){
        aA[i].οnclick=function(){
          oUl1.removeChild(this.parentNode);  //调用格式：父级.removeChild(子节点);
        }
      }
    }
    </script>
  </head>

  <body>
    <input type="text" id="txt1">
    <input type="button" id="btn1" value="创建li">
    <ul id='ul1'></ul>

    <ul id='ul2'>
      <li>111111<a href="javascript:;">删除</a></li>
      <li>222222<a href="javascript:;">删除</a></li>
      <li>333333<a href="javascript:;">删除</a></li>
      <li>444444<a href="javascript:;">删除</a></li>
      <li>555555<a href="javascript:;">删除</a></li>
    </ul>
  </body>


</html>

曲奇小姐

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
DOM基础-2 createElement(),appendChild(),insertBefore()，removeChild()

&lt;!DOCTYPE html&gt;&lt;html lang="en" dir="ltr"&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;DOM基础-2&lt;/title&gt; &lt;style&gt;&lt;/st
复制链接

扫一扫

专栏目录