2. 程式人生 > >javaEE (四）javaweb_JavaScript (7) 動態載入列表

javaEE (四）javaweb_JavaScript (7) 動態載入列表

阿新 • • 發佈：2018-12-22

Date：2018/11/17

效果如圖，點選按鈕就會增加一個hah，主要是測試建立節點和嵌入節點的功能，具體例子在（6）中有體現：
在這裡插入圖片描述

原始碼：

<!-- 
1、document.createTextNode  建立文字節點
2、document.createElement   建立元素節點(html 裡標籤就是節點)
3、liEle.appendChild     可以在節點裡加另一個元素節點或者文字節點，層層巢狀
 -->


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
 

		<title></title>
	</head>
	
	<script>
		
	 window.onload = function(){
		 document.getElementById("btn").onclick = function(){
			 var  ulEle = document.getElementById("bigone");
			 var  textNode = document.createTextNode("hah");
			 var  liEle = document.createElement("li")
 
;
			 liEle.appendChild(textNode);
			 ulEle.appendChild(liEle); 
		 }
		 
	 }
		
	</script>
	
	
	
	<body >
		 <input type="button" value="點選" id="btn"/>
         <ul id="bigone">
		
		 <li>asdas</li>
		 
		 </ul>
		
	</body>
</html>

相關推薦

javaEE (四）javaweb_JavaScript (7) 動態載入列表

Date：2018/11/17 效果如圖，點選按鈕就會增加一個hah，主要是測試建立節點和嵌入節點的功能，具體例子在（6）中有體現： 原始碼： <!-- 1、document.createTextNode 建立文字節點 2、document.crea

javaEE (四）javaweb_JavaScript (4) 改進表格變色：滑鼠進入表格變色

Date：2018/11/17 效果如圖所示，滑鼠進入表格變色，游標離開恢復 原始碼： <!-- 1、滑鼠進入/出 ：onmouseover / onmouseout --> <!-- 2、兩個事件繫結一個函式chColor() --> <!D

javaEE (四）javaweb_JavaScript (4) 表格變色：隔行變色

效果如圖所示，隔行變色 原始碼： <!-- 新標籤： <thead> <tr> <th> </th> </tr> </thead> <tbody> <

javaEE (四）javaweb_JavaScript (5) 表單全選

Date：2018/11/17 效果如圖：點選一個，其他全選，可以復原： 原始碼： <!-- 1、確定事件：onclick 繫結到複選框裡面； --> <!-- 2、獲取複選框：var checkAllEle = document.getE

javaEE (四）javaweb_JavaScript (6) 省市二級聯動

Date：2018/11/17 效果圖，籍貫選湖北，然後後面就會出現湖北的地級市: 原始碼： <!-- 1、事件(onchange)； 2、建立二維陣列儲存省份和城市；（陣列長度 = 最大角標+1） 3、獲取使用者選擇的省份(使用方法傳參的方式：th

osgEarth的Rex引擎原理分析（十四）分頁瓦片載入器子節點的作用

目標：（十二）中的問題21 在rex引擎的setMap中建立了分頁瓦片載入器子節點 osgEarthDrivers/engine_rex/RexTerrainEngineNode.cpp void RexTerrainEngineNode::setMap(const Map* map, co

bootStrap:動態載入列表

$( function() { //載入資料 $.ajax({ url : "settings/dictionary/type/queryAllType.d

javaEE (三）javaweb_JavaScript (2)輪播圖片+彈出廣告

Day：2018/11/13 在網頁上輪圖片和彈出廣告： 原始碼 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>案例

javaEE (三）javaweb_JavaScript (1)表單校驗

Date：2018/11/13 1：表單校驗 效果圖：在表單中輸入的資訊不符合時候，會彈窗警告。 原始碼： <!-- 1：將事件函式嵌入到相應的標籤中(如監測提交的onsubmit = “return function()") --> <!-

（四）爬蟲之動態網頁

　　對於網頁上的有些內容，需要進行一定的互動操作，才能拿到相應的資料，例如常見的ajax請求等。為了抓取ajax請求的結果，可以通過ajax請求的url，抓取返回結果，也可以利用Selenium模組來模擬網頁ajax。簡單記錄下一段學習過程。 1.問題分析 　　如下面我愛我家的網頁中（https://wh

理解JVM（四）：JVM類載入機制

Class檔案 我們寫的Java程式碼，經過編譯器編譯之後，就成為了.class檔案，從本地機器碼變成了位元組碼。Class檔案是一組以8位位元組為基礎單位的二進位制流，各個資料專案嚴格按照順序緊湊地排列在Class檔案之中，中間沒有新增任何分隔符，這使得整個

（四）CentOS 7安裝Nginx(編譯安裝)

CentOS 7安裝Nginx(編譯安裝) 1、下載 wget http://219.238.7.69/files/1010000009FBF5E7/nginx.org/download/nginx-1.11.13.tar.gz 2、解壓

AJAX經典應用之動態載入列表框

動態載入列表框在許多場景中都需要用到。 比如說當用戶選擇了某幾項選項之後，會自動根據使用者的選擇來動態載入列表框。下面要講的就是這樣一個例子。 注意事項： 增加新的節點需要從下往上依次加進去 dynamicList.html <!DOCTYPE html> &

freemark動態載入列表資料

1.ftl頁面中 <table class="table table-striped table-hover table-bordered" name="record" id="editable-sample"> </table> fun

Ajax動態載入列表框

1.dynamicLists.html： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"

自定義View（四） Graphics2D 實現動態效果

自定義動畫的動態包括兩個方面 讓動畫動起來 （這類動畫可以通過週期行重畫實現） 實現和使用者的互動 在繪圖的整個過程中，經常會使用到雙快取技術，這是一項挺重要的技術，，為什麼這麼說呢？ 能提高繪圖的效率 實現繪圖的過程和結果分離 ⚠️ 理解和掌

WPF中的binding（四）- 使用集合物件作為列表控制元件的ItemsSource

WPF中列表式控制元件派生自ItemsControl類，繼承了ItemsSource屬性。ItemsSource屬性可以接收一個IEnumerable介面派生類的例項作為自己的值（所有可被迭代遍歷的集

Flutter 開發從 0 到 1（四）ListView 下拉載入和載入更多

![](https://img-blog.csdnimg.cn/img_convert/447c12d917bbe417b46706e2edfc69d0.png) 在《[APP 開發從 0 到 1（三）佈局與 ListView](https://mp.weixin.qq.com/s/Bia6VzhLJmOT

Python爬蟲開發（四）：動態載入頁面的解決方案與爬蟲代理

0×00 前言 如果讀者讀過我前面的關於爬蟲的文章，應該大概都清楚我們現在可以對一個靜態的web頁面”為所欲為“了，但是技術的發展總是沒有止境的，僅僅是這樣對靜態頁面處理遠遠不夠，要知道現在很多的web頁面有意無意為了防止靜態爬蟲使用ajax技術動態載入頁面，這就導致了在面對這些網站的時候，我們

python學習（7）：python爬蟲之爬取動態載入的圖片，以百度圖片為例

前言： 前面我們爬取圖片的網站都是靜態的，在頁面中右鍵檢視原始碼就能看到網頁中圖片的位置。這樣我們用requests庫得到頁面原始碼後，再用bs4庫解析標籤即可儲存圖片到本地。 當我們在看百度圖片時，右鍵–檢查–Elements，點選箭頭，再用箭頭點選圖片時