jquery的append与prepend

jackxiang 2011-6-16 11:11

jquery的append与prepend:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
        <title>Listen</title>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
        <script type="text/javascript">
        /* <![CDATA[ */
$().ready(
        function() {
        var datas;
        datas = "hello the word.";
        var last_modified ;
        last_modified = "HHHH";
        var etag;
        etag = "Etag";
               div = $('<div class="msg">').text(datas);
               info = $('<div class="info">').text('Last-Modified: ' + last_modified + ' | Etag: ' + etag);
               //$('#data').prepend(div);
                $('#data').append(div);
               //$('#data').prepend(info);    
               $('#data').append(info);        
               }
);
        </script>
        <style type="text/css">
            #data {
                margin: .5em;
            }
            #data .info {
                font-weight: bold;
                font-size: 14px;
            }
            #data .msg {
                white-space: pre;
                font-family: courier;
                font-size: 14px;
                margin-bottom: .5em;
                margin-left: .5em;
            }
        </style>
    </head>
    <body>
        <div id="data"></div>
    </body>
</html>

其实就是一个DIV嵌套顺序问题，如下：
$('#data').prepend(div);
$('#data').prepend(info);
-------------
<div id="data">
<div class="info">Last-Modified: HHHH | Etag: Etag</div>
<div class="msg">hello the word.</div>
</div>
-------------
$('#data').append(div);
$('#data').append(info);
<div id="data">
<div class="msg">hello the word.</div>
<div class="info">Last-Modified: HHHH | Etag: Etag</div>
</div>

作者：jackxiang@向东博客专注WEB应用构架之美 --- 构架之美，在于尽态极妍 | 应用之美，在于药到病除
地址：http://jackxiang.com/post/4386/
版权所有。转载时必须以链接形式注明作者和原始出处及本声明！

在google上加载jquery库,使用Google API 有条件加载

windows下删除.svn目录

评论列表

向东博客专注WEB应用构架之美 --- 构架之美，在于尽态极妍 | 应用之美，在于药到病除|赢在IT，Playin' with IT,Focus on Killer Application,Marketing Meets Technology.

jquery的append与prepend

分类

最新日志

链接

向东博客 专注WEB应用 构架之美 --- 构架之美，在于尽态极妍 | 应用之美，在于药到病除|赢在IT，Playin' with IT,Focus on Killer Application,Marketing Meets Technology.

jquery的append与prepend

分类

最新日志

链接

向东博客专注WEB应用构架之美 --- 构架之美，在于尽态极妍 | 应用之美，在于药到病除|赢在IT，Playin' with IT,Focus on Killer Application,Marketing Meets Technology.