前台学习随手记

来源：互联网发布：towedm线切割编程系统编辑：程序博客网时间：2024/06/07 04:04

Jquery-DOM内部插入append()与appendTo()

append()是要插入的内容放在方法的后面，参数就是要插入的内容

appendTo()正好相反，是将要插入的内容放在方法的前边

<!DOCTYPE html><html><head>    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />    <title></title>    <script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>    <style>        .content {            width: 300px;        }        .append{            background-color: blue;        }        .appendTo{            background-color: red;        }    </style></head><body><h2>通过append与appendTo添加元素</h2><button id="bt1">点击通过jQuery的append添加元素</button><button id="bt2">点击通过jQuery的appendTo添加元素</button><div class="content"></div><script type="text/javascript">    debugger    $("#bt1").on('click', function() {        //.append(), 内容在方法的后面，        //参数是将要插入的内容。        $(".content").append('<div class="append">通过append方法添加的元素</div>')    })</script><script type="text/javascript">/*    $("#bt2").on('click', function() {        //.appendTo()刚好相反，内容在方法前面，        //无论是一个选择器表达式 或创建作为标记上的标记        //它都将被插入到目标容器的末尾。        $('<div class="appendTo">通过appendTo方法添加的元素</div>').appendTo($(".content"))    })*/$("#bt2").on('click',function(){    $('<div class="append">通过appendto方法添加元素</div>').appendTo($(".content"))})</script></body></html>

引用我的代码片

阅读全文

0 0