記錄我的旅程4之JavaScript Dom學習筆記

最後更新：2018-12-07 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

好長時間有沒有寫部落格了,從今天起我的部落格之路繼續了,嘿嘿下面我們接著旅程3繼續我們的Dom征程4，這篇博文講的是Dom的動態建立。

Dom的動態建立

(1) document.write只能在頁面載入過程中才能動態建立

(2) 可以調用document的createElement方法來建立具有指定標籤的Dom對象，然後通過調用某個元素的appendChild方法將新建立的元素添加到相應的元素下。

function btnClick() {

var divMain = document.getElementById("divMain"); //獲得層

var input = document.createElement("input");

input.value = "我的動態按鈕";

input.type = "button";

divMain.appendChild(input); //將產生的元素添加到divMain層

}

</script>

<body>

</body>

(3)innerText，innerHTML

1) 幾乎所有的Dom元素都有innerText,innerHTML 屬性（注意大小寫），分別是元素標籤內容的文本表示形式和HTML原始碼，這兩個屬性是可讀可寫的。

2) 用innerHTML也可以替代createElement，屬於簡單粗放型。

function createInput() {

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

divMain.innerHTML = "<input type='button' value='按鈕' />";

}

</script>

注釋:這個動態建立按鈕只能建立一個按鈕，不能重複的建立。

練習1：點擊按鈕增加一個網站的超連結

function createLink() {

var divMianLink = document.getElementById("divMainlink");

var link = document.createElement("a");

link.href = "http://www.cnblogs.com";

link.innerText = "百度 ";

divMainlink.appendChild(link);

}

</script>

練習2：點擊按鈕動態增加網站列表，分兩列，第一列為網站的名字，第二列為帶網站超連結的的網站名，增加三行常見網站。

function loadData() {

var data = { "百度": "http://www.baidu.com", "部落格園": "http://www.cnblogs.com", "新浪": "http://www.sina.com" };

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

for (var key in data) {

var value = data[key];

var tr = document.createElement("tr");

var td1 = document.createElement("td"); //先建立td，放入內容，在加入tr

td1.innerText = key;

tr.appendChild(td1);

var td2 = document.createElement("td");

td2.innerHTML = "<a href='" + value + "'>" + value + "</a>";

tr.appendChild(td2);

tableLinks.appendChild(tr);

}

</script>

注釋:動態產生的元素,查看原始碼是看不到的,通過F12開發人員工具或者DebugDar—>Dom—>文檔—>HTML可以看到。

注釋：瀏覽器安全色性的例子，ie6,ie7不支援table.appendChild(“tr”).

詳註：瀏覽器安全色新問題

(1) 瀏覽器安全色性的例子，ie6,ie7對table.appendChild(“tr”)的支援和IE8不一樣，用insertRow,insertCell來代替或者為表格添加tbody，然後向tbody中添加tr,FF不支援innerText。所以動態載入網站的列表程式修改為：

var tr = tableLinks2.insertRow(-1);

var td1 = tr.insertCell(-1);

td1.innerText = key;

var td2 = tr.insertCell(-1);

td2.innerHTML = "<a href='" + value + "'>" + value + "</a>";

或者<table id=”tableLinks”>

然後tableLinks.tBodies[0].appendChild(tr);

重寫上述案例：代碼如下

function loadData1() {

var data = { "百度": "http://www.baidu.com", "部落格園": "http://www.cnblogs.com", "新浪": "http://www.sina.com" };

var tableLinks = document.getElementById("tableLinks2");

for (var key in data) {

var value = data[key];

var tr = tableLinks2.insertRow(-1);

var td1 = tr.insertCell(-1);

td1.innerText = key;

var td2 = tr.insertCell(-1);

td2.innerHTML = "<a href='" + value + "'>" + value + "</a>";

}

練習3：練習點評無重新整理評論。

function addComment() {

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

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

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

var tr = document.createElement("tr");

var tdnickName = document.createElement("td");

tdnickName.innerText = nickname;

tr.appendChild(tdnickName);

var tdCommnent = document.createElement("td");

tdCommnent.innerText = comment;

tr.appendChild(tdCommnent);

tableComment.tbodies[0].appendChild(tr);

}

</script>

</table>

暱稱：<input type="text" id="nickname" /><br />

內容：<textarea id="comment"></textarea><br />

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More