jQuery操作节点

一、创建节点

语法：$() // 括号里面直接传想要创建的节点

$('<div>我是被创建的节点</div>')
$('<img src="./1.png" title="哈哈"></img>')

二、添加节点

1. append() // 添加到子元素后面 括号内传被创建的元素
2. prepend() // 添加到子元素前面 括号内传被创建的元素
3. appeddTo() // 添加到子元素后面 括号内传父元素
4. prependTo() // 添加到子元素前面 括号内传父元素
5. after() // 添加到元素后面作为兄弟元素 括号内传被创建的元素
6. before() // 添加到元素前面作为兄弟元素 括号内传被创建的元素

三、清空节点

empty() // 父元素调用 清空子节点

$('.container').empty() // 清空.container下面的全部子元素

四、删除节点

remove() // 子元素调用（删除自己）

$('.container').remove() // 删除.container自己

五、克隆节点

clone() // 深度复制

• 传参为true：会复制事件
• 传参为false：不会复制事件

$('button').eq(0).click(function () {
        // 创建节点
        let a = $('<div>哈哈哈哈哈哈</div>')
        // 设置样式
        a.css({
          color: 'green',
          fontSize: '32px',
          textAlign: 'center',
          lineHeight: '300px',
        })
        // 把创建的元素添加到.container中
        a.appendTo('.container')
        // 另一种写法：
        // $('.container').append($div)
      })

      // 清空节点
      $('button').eq(1).click(function () {
        $('.container').empty()
      })

      // 删除节点
      $('button').eq(2).click(function () {
        $('.container div').remove()
      })

      // 克隆节点
      $("button").eq(3).click(function(){
        let a = $('.container').clone()
        a.appendTo('body')
      })

前端进阶精选：点此去