jquery增添class，移除元素，添加元素 - 20191224

<div class="container">
    <main>
        <p></p>
        <a href="javascript:" id="cls" onclick="toggles()">class操作</a>
    </main>
    <section>
    <button type="button" onclick="appends()">append</button>
    <button type="button" onclick="appendTos()">appendTo</button>
    <button type="button" onclick="prepends()">prepend</button>
    <button type="button" onclick="prependTos()">prependTo</button>
    <button type="button" onclick="befores()">before</button>
    <button type="button" onclick="afters()">after</button>
    <button type="button" onclick="insertBefores()">insertBefore</button>
    <button type="button" onclick="insertAfters()">insertAfter</button>
    <button type="button" onclick="emptys()">empty</button>
    <button type="button" onclick="removes()">remove</button>
    </section>
</div>

   var container = $('.container main');
    // append 先选择要添加的对象，之后添加DOM，文本，或jQuery对象，添加到容器的尾部
    function appends(){
        container.append('<div></div>');
        // container.append('text');
        // container.append($('p'));
    }
    // appendTo 和 append 方法相同，区别是，appendTo，是先选择添加内容，后选择添加容器
    // $('') 中可以创建内容，也可以选择DOM节点
    function appendTos(){
        $('<div>123</div>').appendTo('.container main');
        // $('p').appendTo('.container');
    }
    //  prepend与append相同，区别是prepend是添加到容器的头部
    function prepends(){
        container.prepend('<div></div>');
        // container.prepend('text');
        // container.prepend($('p'));
    }
    function prependTos(){
        $('<div>123</div>').prependTo('.container main');
        // $('p').prependTo('.container');
    }
    function befores(){
        // 在所选元素之前添加元素，添加的元素和所选元素是兄弟关系
        $('.container').before('<header></header>');
    }
    function afters(){
        // 在所选元素之后添加元素，添加的元素和所选元素是兄弟关系
        $('.container').after('<footer></footer>');
    }
    function insertBefores(){
        // insertBefore和before功能一样，区别是先选择添加内容，再选择容器，选择容器不能是对象，只能是DOM节点
        $('<header></header>').insertBefore('.container');
    }
    function insertAfters(){
        // insertAfter和after功能一样，区别是先选择添加内容，再选择容器，选择容器不能是对象，只能是DOM节点
        $('<footer></footer>').insertAfter('.container');
    }
    function emptys(){
        container.empty();
    }
    function removes(){
        $('.container main div:first-of-type').remove();
    }
    function toggles(){
        $('#cls').toggleClass('on');
    }