<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('');
    })
    
    /* 原生 */
    // 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">我为南京代言,我是张sir</h1>').appendTo('.box');
    /* $(A). prepend (B)表示将B前置插入到A中 */
    // $('.box').prepend('<h1 data-name="zhangsan">我为南京代言,我是张sir</h1>')
    /* $(A). prependTo (B)表示将A前置插入到B中 */
    // $('<h1 data-name="zhangsan">我为南京代言,我是张sir</h1>').prependTo('.box')