/*將ul的內容複製到另一個div中

1,獲取到ul

2,執行復制方法 cloneNode方法複製 true

3,把複製後的內容放到div中

** 獲取div

** appendChild方法

* */

function clone() {

var ul21 = document.getElementById("ulid21");

//複製ul,方法類似剪切版

var ulclone = ul21.cloneNode(true);

var divv = document.getElementById("divv");

divv.appendChild(ulclone);

}

** 操作dom樹的總結

* 獲取節點的方法

getElementById();

getElementByName();

getElementByTagName();

* 插入節點的方法

insertBefore(newNode,oldNode);

* 刪除節點的方法

removeChild();

* 替換節點的方法

replaceChild();

6,innerHTML屬性

* 這個屬性 大部分瀏覽器都支持.且不是dom的組成部分

第一個作用:獲取文本內容

獲取div內容:

var sid = document.getElementById("sid");

alert(sid.innerHTML);

第二個作用:向標籤裡面設置內容(可以是html代碼)

向div中添加內容:

var divv = document.getElementById("divv");

divv.innerHTML = "

AAAAAA

** 練習:向div中添加一個表格

7,案列二:動態顯示時間

* 得到當前時間

var data = new data();

var data1 = data.tolocalString();

* 讓頁面實時更新時間

setInterval方法 定時器

* 顯示到頁面上

每一次向div裡面寫一次時間

* 使用innerHTML屬性

8,案例三:全選練習

* 創建一個頁面

- 複選框

-- 四個複選框 表示愛好

-- 有一個複選款 進行全選和全不選

- 三個按鈕

-- 全選

/*

1,獲取要操作的複選框,使用getElementsByName()

2,返回的是一個數組

-- 屬性checked 判斷複選框是否選中

** checked = true;//表示選中

** checked = false;//表示未選中

-- 遍歷數組,得到的是每一個checked

** 把每個checked屬性賦值 :checked = true

*/

-- 全不選

類似全選

-- 反選

/*

1,獲取到需要操作的複選框

2,返回數組.遍歷數組

3,得到每一個複選框

4,判斷當前的複選框是選中還是不選中

- if(lovel.checked == true){}

5,如果選中,屬性設置成false,否則設置成true

*/

9,案例四:下拉列表左右選擇

* 下拉選擇

*創建一個頁面

** 兩個下拉選擇框

** 左右四個操作按鈕

10,案例五:省市聯動

* 創建一個頁面.有兩個下拉選擇框

* 在第一個下拉框裡面存在一個事件,改變事件 onchange事件

- 方法 add1(this.value);表示當前改變的option裡面的value值

* 創建一個二維數組,存儲數據

- 每個數組中的第一個元素是國家名稱,後面的元素是國家裡面的城市

* 主要操作步驟

/*

1,遍歷二維數組

2,得到數組(國家的對應關係)

3,拿到數組的第一個元素和蒼朮能敵過來的值作比較,

4,如果相同,獲取二維數組的第一個值後面的袁術

5,得到city的select

6,將內容添加過去 appendChild方法

7,創建option

* 創建屬性

* 創建文本

* 文本添加到option

*/

/*

由於每次都要向city中添加內容,因此每次添加的時候要先判斷city中

是否有option,有的話要先刪除

*/

*

11,案例六:動態生成表格

`* 創建一個頁面:兩個輸入框和一個按鈕

代碼和步驟:

function add2() {

/*

1,得到行和列的值

2,生成表格

* 循環行

* 在行裡面循環單元格

3,顯示到頁面上

- 把表格的代碼設置到div裡面

- 使用innerHTML屬性

*/

// 獲取輸入的行和列

var h = document.getElementById("h").value;

var l = document.getElementById("l").value;

//把表格的代碼放到一個變量裡面

var tab = "

//循環行

for(var i=0;i<=h;i++){

tab += "

//循環單元格

for(var j =0;j<=l;j++){

tab += "

}

tab += "

}

tab += "

//得到div

var divv = document.getElementById("divv");

//把table的代碼設置到div裡面

divv.innerHTML = tab;

}

閱讀更多 一兒口山石 的文章

關鍵字: 貂蟬 JavaScript 文本