jquery的append与prepend

Thu, 16 Jun 2011 03:11:03 +0000

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);
-------------

Last-Modified: HHHH | Etag: Etag

hello the word.

-------------
$('#data').append(div);
$('#data').append(info);

hello the word.

Last-Modified: HHHH | Etag: Etag

[评论] jquery的append与prepend

Thu, 01 Jan 1970 00:00:00 +0000

向东博客 专注WEB应用 构架之美 --- 构架之美，在于尽态极妍 | 应用之美，在于药到病除

jquery的append与prepend

[评论] jquery的append与prepend

向东博客专注WEB应用构架之美 --- 构架之美，在于尽态极妍 | 应用之美，在于药到病除