jQuery DOM節點和節點屬性

透過JavaScript可以很方便的取得DOM節點,從而進行一系列的DOM操作。但其實一般開發者都習慣性的先定義好HTML結構,但這樣就非常不靈活了。

試想下這樣的情況:如果我們透過AJAX取得到資料之後才能確定結構的話,這種情況就需要動態的處理節點了

本文向大家介紹一下如何使用JavaScript建立div節點元素,主要包含建立div節點元素的屬性和建立div節點元素的樣式兩大部分內容,相信本文介紹一定會讓你有所收穫。

節點的建立

    建立流程:        

            

            加入文件中

下面我們來看一個例子

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
    <script>
        $(function(){
            var $li1 = $("<li>php中文网</li>");  //创建第一个li 标签
            var $li2 = $("<li>php.cn</li>");  //创建第二个li 标签

            $("ul").append($li1);  //添加到<ul>节点中,<ul>节点是<li>的父节点
        })
    </script>
</head>
<body>
    <ul></ul>

</body>
</html>

如上程式碼,我們就已經創建了兩個節點    標籤中的文字內容,通常稱為文字節點

##
繼續學習
||
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script> <script> $(function(){ var $li1 = $("<li>php中文网</li>"); //创建第一个li 标签 var $li2 = $("<li>php.cn</li>"); //创建第二个li 标签 $("ul").append($li1); //添加到<ul>节点中,<ul>节点是<li>的父节点 }) </script> </head> <body> <ul></ul> </body> </html>