首页 > 代码库 > jQuery添加删除DOM元素

jQuery添加删除DOM元素

1.添加DOM元素  append   prepend   before  after

//append 添加在同级元素的之前  实例:

<div class="header"><p>添加节点在同级元素之后</p></div>

var pageup = ‘<strong>append 在同级元素之后</strong><br>‘;
         $(‘.header‘).on(‘click‘,function(){
         $(this).append(pageup);
});


//prepend 添加在同级元素的之后 实例:

<div class="section"><p>添加节点元素在同级之前</p></div>

var pagedown = ‘<strong>prepend 在同级元素之前</strong><br>‘
         $(‘.section‘).on(‘click‘,function(){
         $(this).prepend(pagedown);
});



//before 在被选择的元素的前面添加节点

var home = ‘<p>before 添加在指定元素之前</p>‘;

$(‘.footer‘).on(‘click‘,function(){
        $(‘.footer>strong‘).before(home);
});

 

//after 在被选择的元素的后面添加节点

var end = ‘<p>after 添加在指定元素之后</p>‘
         $(‘.aside‘).on(‘click‘,function(){
          $(‘.aside>strong‘).after(end);
});

 

2.删除DOM元素 remove(删除)   empty(清空)

//使用remove来删除节点

$(‘.top‘).on(‘click‘,function(){
     $(this).remove();
});

//使用empty清空节点

<div class="bottom">
    <p>鼠标移出清空节点</p>
  <p>鼠标移出清空节点</p>
  <p>鼠标移出清空节点</p>
  <p>鼠标移出清空节点</p>
  <p>鼠标移出清空节点</p>
</div>

$(‘.bottom‘).on(‘click‘,function(){
   $(this).empty();
});

 

 

3.节点的选择

//chilren 选取所有子节点
//parent 选取父节点
//next 下一个节点 nextAll选取所有之后的元素
//prev 上一个节点 prevAll选取所有之前的元素
//siblings 筛选出所有同辈节点,除了当前的选中的节点

//closest 快速选取父节点

//制作的二级菜单

<ul class="list">
   <li>
    <a href="javascript:;">菜单1</a>
     <nav>
      <a href="javascript:;">子菜单1</a>
      <a href="javascript:;">子菜单1</a>
      <a href="javascript:;">子菜单1</a>
    </nav>
  </li>
  <li>
    <a href="javascript:;">菜单2</a>
    <nav>
      <a href="javascript:;">子菜单2</a>
      <a href="javascript:;">子菜单2</a>
      <a href="javascript:;">子菜单2</a>
    </nav>
  </li>
  <li>
    <a href="javascript:;">菜单3</a>
    <nav>
      <a href="javascript:;">子菜单3</a>
      <a href="javascript:;">子菜单3</a>
      <a href="javascript:;">子菜单3</a>
    </nav>
  </li>
</ul>

 


var ListA = $(‘ul.list>li>a‘);
ListA.next().hide();
ListA.on(‘click‘,function(){
// $(this).next().slideDown(1000).parent().siblings().children().next().slideUp(1000);
        $(this).next().show().parent().siblings().children().next().hide();
});
  $(‘ul.list>li‘).on(‘blur‘,function(){
        ListA.next().hide();
        console.log(‘失去焦点‘);
  });
})

jQuery添加删除DOM元素