jQuery operation node

One, create a node

Syntax: $() // directly pass the node you want to create in the parentheses

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

Two, add nodes

1. append() // add to the child element and pass the created element in parentheses
2. prepend() // add to the parent element in front of the child element to pass the created element
3. appeddTo() // Add to the parent element after the child element in parentheses
4. prependTo() // add to the parent element in front of the parent element
5. after() // Add to the end of the element as a sibling element to pass the created element in parentheses
6. before() // add to the front of the element as a sibling element to pass the created element in parentheses

Three, clear the node

empty() // The parent element calls to empty the child node

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

Fourth, delete the node

remove() // child element call (remove yourself)

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

Five, clone node

clone() // deep copy

• Pass parameter is true: the event will be copied
• Pass parameter is false: event will not be copied

$('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')
      })

Web front-end communication QQ group: 327814892