jQuery簡(jiǎn)單創(chuàng)建節(jié)點(diǎn)的方法
更新時(shí)間：2016年09月09日 08:50:39 作者：onestopweb
這篇文章主要介紹了jQuery簡(jiǎn)單創(chuàng)建節(jié)點(diǎn)的方法,涉及jQuery獲取節(jié)點(diǎn)及append添加元素創(chuàng)建節(jié)點(diǎn)的相關(guān)技巧,需要的朋友可以參考下
本文實(shí)例講述了jQuery簡(jiǎn)單創(chuàng)建節(jié)點(diǎn)的方法。分享給大家供大家參考，具體如下：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script type="text/javascript" src="js/jquery-1.10.1.min.js"></script>
<script type="text/javascript">
//<![CDATA[
$(function(){
var $li_1 = $("<li title='香蕉'>香蕉</li>"); //創(chuàng)建一個(gè)<li>元素
//包括元素節(jié)點(diǎn),文本節(jié)點(diǎn)和屬性節(jié)點(diǎn)
//其中title='香蕉' 就是創(chuàng)建的屬性節(jié)點(diǎn)
var $li_2 = $("<li title='雪梨'>雪梨</li>"); //創(chuàng)建一個(gè)<li>元素
//包括元素節(jié)點(diǎn),文本節(jié)點(diǎn)和屬性節(jié)點(diǎn)
//其中title='雪梨' 就是創(chuàng)建的屬性節(jié)點(diǎn)
var $parent = $("ul"); // 獲取<ul>節(jié)點(diǎn)。<li>的父節(jié)點(diǎn)
$parent.append($li_1); // 添加到<ul>節(jié)點(diǎn)中，使之能在網(wǎng)頁(yè)中顯示
$parent.append($li_2); // 等價(jià)于：$parent.append($li_1).append($li_2);
});
//]]>
</script>
</head>
<body>
<p title="選擇你最喜歡的水果." >你最喜歡的水果是?</p>
<ul>
<li title='蘋果'>蘋果</li>
<li title='橘子'>橘子</li>
<li title='菠蘿'>菠蘿</li>
</ul>
</body>
</html>
效果圖如下：
更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《jQuery操作DOM節(jié)點(diǎn)方法總結(jié)》、《jQuery頁(yè)面元素操作技巧匯總》、《jQuery常見事件用法與技巧總結(jié)》、《jQuery常用插件及用法總結(jié)》、《jQuery操作json數(shù)據(jù)技巧匯總》、《jQuery擴(kuò)展技巧總結(jié)》、《jQuery拖拽特效與技巧總結(jié)》、《jQuery表格(table)操作技巧匯總》、《jQuery常見經(jīng)典特效匯總》、《jQuery動(dòng)畫與特效用法總結(jié)》及《jquery選擇器用法總結(jié)》
希望本文所述對(duì)大家jQuery程序設(shè)計(jì)有所幫助。
您可能感興趣的文章:
- jQuery與JavaScript節(jié)點(diǎn)創(chuàng)建方法的對(duì)比
- jstree創(chuàng)建無(wú)限分級(jí)樹的方法【基于ajax動(dòng)態(tài)創(chuàng)建子節(jié)點(diǎn)】
- jQuery動(dòng)態(tài)創(chuàng)建元素以及追加節(jié)點(diǎn)的實(shí)現(xiàn)方法
- JavaScript中對(duì)DOM節(jié)點(diǎn)的訪問(wèn)、創(chuàng)建、修改、刪除
- JQuery創(chuàng)建DOM節(jié)點(diǎn)的方法
- 刪除javascript所創(chuàng)建子節(jié)點(diǎn)的方法
- js創(chuàng)建元素（節(jié)點(diǎn)）示例
- xml創(chuàng)建節(jié)點(diǎn)(根節(jié)點(diǎn)、子節(jié)點(diǎn))
- js和jquery對(duì)dom節(jié)點(diǎn)的操作(創(chuàng)建/追加)
- jquery創(chuàng)建一個(gè)新的節(jié)點(diǎn)對(duì)象(自定義結(jié)構(gòu)/內(nèi)容)的好方法
- 創(chuàng)建二叉樹 二叉樹如何刪除節(jié)點(diǎn)操作教程
- 初學(xué)js 新節(jié)點(diǎn)的創(chuàng)建 刪除 的步驟
- 淺述節(jié)點(diǎn)的創(chuàng)建及常見功能的實(shí)現(xiàn)
相關(guān)文章
fadeOut() 方法逐漸改變被選元素的不透明度，從可見到隱藏（褪色效果）。這篇文章給大家介紹jquery fadeout異步實(shí)例代碼，感興趣的朋友一起看下吧2016-08-08
jquery-syntax動(dòng)態(tài)語(yǔ)法著色示例代碼
語(yǔ)法著色大家對(duì)它都不陌生吧，下面為大家介紹的是jquery-syntax動(dòng)態(tài)語(yǔ)法著色的具體實(shí)現(xiàn),需要的朋友可以參考下2014-05-05
這篇文章主要為大家詳細(xì)介紹了jquery插件實(shí)現(xiàn)圖片懸浮，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-04-04
jquery實(shí)現(xiàn)通用的內(nèi)容漸顯Tab選項(xiàng)卡效果
這篇文章主要介紹了jquery實(shí)現(xiàn)通用的內(nèi)容漸顯Tab選項(xiàng)卡效果,涉及jquery通過(guò)時(shí)間函數(shù)定時(shí)觸發(fā)頁(yè)面元素樣式變換的功能,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-09-09
jQuery用FormData實(shí)現(xiàn)文件上傳的方法
眾所周知文件上傳是Web開發(fā)中的重要話題，最直接和簡(jiǎn)單的方式是通過(guò)表單直接提交文件。 下面這篇文章小編就來(lái)和大家分享jQuery利用FormData實(shí)現(xiàn)文件上傳的方法，文中介紹的方法簡(jiǎn)單易懂，相信對(duì)大家的理解和學(xué)習(xí)很有幫助，有需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧。2016-11-11
一直以來(lái)都認(rèn)為新版本中 data 是調(diào)用 dataset 實(shí)現(xiàn)的，對(duì)于低版本IE則采用 getAttribute其實(shí)一直是我誤解了，也不知道最初這個(gè)想法是怎么來(lái)的2014-06-06
jQuery實(shí)現(xiàn)自動(dòng)切換播放的經(jīng)典滑動(dòng)門效果
這篇文章主要介紹了jQuery實(shí)現(xiàn)自動(dòng)切換播放的經(jīng)典滑動(dòng)門效果,可實(shí)現(xiàn)tab自動(dòng)定時(shí)切換的功能,涉及jQuery基于定時(shí)函數(shù)動(dòng)態(tài)操作頁(yè)面元素的相關(guān)技巧,需要的朋友可以參考下2015-09-09
基于input動(dòng)態(tài)模糊查詢的實(shí)現(xiàn)方法
下面小編就為大家分享一篇基于input動(dòng)態(tài)模糊查詢的實(shí)現(xiàn)方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2017-12-12
jQuery學(xué)習(xí)2 選擇器的使用說(shuō)明
利用選擇器，選擇要被操作的html中的元素。2010-02-02
jQuery Validation PlugIn的使用方法詳解
這篇文章主要介紹了jQuery Validation PlugIn的使用方法，需要的朋友可以參考下2015-12-12