JQuery创建和插入节点

HTML部分

<div class="box">
    <h1>我爱中国</h1>
</div>
<input type="text">
<button class="a">前置添加</button>
<button class="b">后置添加</button>

JS部分

<script src="./jquery-1.12.4.js"></script>
<script>
    /* 获取input的内容 创建h1 h1有input的内容 点击插入到.box里面*/
    $('.a').click(function(){
        let inputVal = $('input').val();
        let h1 = $('<h1>'+inputVal+'</h1>');
        // $('.box').prepend(h1);
        /* 这里.box是可以不用$包裹的 */
        h1.prependTo('.box')
        $('input').val('');
    })

    $('.b').click(function(){
        let inputVal = $('input').val();
        let h1 = $('<h1>'+inputVal+'</h1>');
        // $('.box').append(h1);
        /* 这里.box是可以不用$包裹的 */
        h1.appendTo('.box')
        $('input').val('');
    })
    </script>

原生JS

<script>
    
    let div = document.createElement('div')
    console.log(div);
    
    /* 把DOM节点转化成jQuery节点 */
    console.log( $('<div></div>') );
    console.log( $('<h1 data-name="zhangsan">我为自己代言</h1>') );
    
    /* $(A).append(B)表示将B追加到A中 */
    $('.box').append( $('<h1 data-name="zhangsan">我为自己代言</h1>') )
    document.getElementsByClassName('box')[0].appendChild(document.createElement('div'))
    
    /* $(A).appendTo(B)表示把A追加到B中 */
    $('<h1 data-name="zhangsan">我为自己代言,我是ABC</h1>').appendTo('.box');
    
    /* $(A). prepend (B)表示将B前置插入到A中 */
    $('.box').prepend('<h1 data-name="zhangsan">我为自己代言,我是ABC</h1>')
    
    /* $(A). prependTo (B)表示将A前置插入到B中 */
    $('<h1 data-name="zhangsan">我为自己代言,我是ABC</h1>').prependTo('.box')
    
</script>