從零開始學 Web 之 DOM（五）元素的建立
大家好，這裡是「 從零開始學 Web 系列教程 」，並在下列地址同步更新......
+------------------------------------------------------------
github：https://github.com/Daotin/Web
微信公眾號：Web前端之巔
部落格園：http://www.cnblogs.com/lvonve/
CSDN：https://blog.csdn.net/lvonve/
+-----------------------------------------------------------
在這裡我會從 Web 前端零基礎開始，一步步學習 Web 相關的知識點，期間也會分享一些好玩的專案。現在就讓我們一起進入 Web 前端學習的冒險之旅吧！
一、元素的建立
1、元素建立的三種方式
1.1、方式一
document.write("標籤程式碼及內容");
示例：
<body> <input type="button" value="按鈕" id="btn"> <script src="common.js"></script> <script> my$("btn").onclick = function() { document.write("<p>這是一個p標籤</p>"); }; // document.write("<p>這是一個p標籤</p>"); </script> </body>
缺陷：如果是在頁面載入完畢後，通過這種方式建立元素的話，頁面上的除此建立元素之外的所有內容都會被清除。但是在頁面載入的時候不會。
1.2、方式二
標籤.innerHTML = "標籤程式碼及內容";
示例：
<body> <script> <input type="button" value="按鈕" id="btn"> <div id="dv"></div> <script src="common.js"></script> <script> my$("btn").onclick = function() { my$("dv").innerHTML = "lvonve"; }; </script> </body>
使用 innerHTML，在頁面載入完畢後，不會清除頁面的內容。
案例：動態建立列表
// 方式一
<body>
<input type="button" value="建立列表" id="btn">
<div id="dv"></div>
<script src="common.js"></script>
<script>
my$("btn").onclick = function() {
my$("dv").innerHTML = "<ul><li>列表一</li><li>列表二</li><li>列表三</li></ul>";
};
</script>
</body>方式一的方式太過死板，li 標籤的個數和內容都是固定的，如果增加 li 的個數需要修改原始碼。
// 方式二
<body>
<input type="button" value="建立列表" id="btn">
<div id="dv"></div>
<script src="common.js"></script>
<script>
var value = ["列表一", "列表二", "列表三", "列表四", "列表五"];
my$("btn").onclick = function() {
var str = "<ul style='list-style: none;cursor: pointer;'>"
for(var i=0; i<value.length; i++) {
str += "<li>"+value[i]+"</li>";
}
str += "</ul>";
my$("dv").innerHTML = str;
};
</script>
</body>1.3、方式三
第一步：建立元素，返回值為一個物件元素
document.creatElement("標籤的名字");
第二步：將元素追加到父元素中
父元素.appendChild(建立的物件);
示例：
<body>
<input type="button" value="建立列表" id="btn">
<div id="dv"></div>
<script src="common.js"></script>
<script>
my$("btn").onclick = function() {
var pObj = document.createElement("p");
setInnerText(pObj, "這是個p標籤"); // 自己封裝在 common.js 的方法
my$("dv").appendChild(pObj);
};
</script>
</body>案例：動態建立列表
<body>
<input type="button" value="建立列表" id="btn">
<div id="dv"></div>
<script src="common.js"></script>
<script>
var values = ["列表1","列表2","列表3","列表4","列表5","列表6"];
my$("btn").onclick = function() {
var ulObj = document.createElement("ul");
my$("dv").appendChild(ulObj);
for(var i=0; i<values.length; i++) {
var liObj = document.createElement("li");
liObj.innerHTML = values[i];
ulObj.appendChild(liObj);
// 滑鼠進入事件
liObj.onmouseover = onmouseoverHandle;
// 滑鼠離開事件
liObj.onmouseout = onmouseoutHandle;
}
function onmouseoverHandle() {
this.style.backgroundColor = "yellow";
}
function onmouseoutHandle() {
this.style.backgroundColor = "";
}
};
</script>
</body>當在迴圈中新增事件的時候，建議不使用匿名函式，因為每個匿名函式都會佔用一片記憶體空間，而使用函式呼叫的方式，不管迴圈多少次，都使用一份程式碼。
案例：動態建立表格
<body>
<input type="button" value="建立列表" id="btn">
<div id="dv"></div>
<script src="common.js"></script>
<script>
var arr = [
{name:"百度", href:"www.baidu.com"},
{name:"谷歌", href:"www.baidu.com"},
{name:"優酷", href:"www.baidu.com"},
{name:"土豆", href:"www.baidu.com"},
{name:"騰訊", href:"www.baidu.com"}
];
my$("btn").onclick = function() {
// 建立table標籤，並新增到div中
var tableObj = document.createElement("table");
tableObj.border = "1";
tableObj.cellSpacing = "0";
tableObj.cellPadding = "0";
my$("dv").appendChild(tableObj);
// 建立tr標籤，新增到table中
for(var i=0; i<arr.length; i++) {
var trObj = document.createElement("tr");
tableObj.appendChild(trObj);
// 新增第一列
var tdObj1 = document.createElement("td");
tdObj1.innerHTML = arr[i].name;
trObj.appendChild(tdObj1);
// 新增第二列
var tdObj2 = document.createElement("td");
tdObj2.innerHTML = "<a href="+arr[i].href+">"+arr[i].name+"</a>";
trObj.appendChild(tdObj2);
}
};
</script>
</body>
tableObj.border = "1";不能使用tableObj.style.border = "1px solid red";這樣的話，只有table有邊框，而 tr 沒邊框。所以 js 中，table 標籤有自帶的 border 屬性可以設定邊框，注意不需要 px。
2、其他操作元素的方法
<body>
<input type="button" value="新增一個按鈕1" id="btn1">
<input type="button" value="新增一個按鈕2" id="btn2">
<input type="button" value="刪除第一個按鈕" id="btn3">
<input type="button" value="刪除所有按鈕" id="btn4">
<div id="dv"></div>
<script src="common.js"></script>
<script>
var count = 0;
// 往後追加按鈕
my$("btn1").onclick = function() {
count++;
var btn = document.createElement("input");
btn.type = "button";
btn.value = "按鈕" + count;
my$("dv").appendChild(btn);
};
// 往前追加按鈕
my$("btn2").onclick = function() {
count++;
var btn = document.createElement("input");
btn.type = "button";
btn.value = "按鈕" + count;
my$("dv").insertBefore(btn, my$("dv").firstElementChild);
};
// 從第一個按鈕開始刪除一個按鈕
my$("btn3").onclick = function() {
my$("dv").removeChild(my$("dv").firstElementChild);
};
// 刪除所有按鈕
my$("btn4").onclick = function() {
while(my$("dv").firstElementChild) {
my$("dv").removeChild(my$("dv").firstElementChild);
}
};
</script>
</body>appendChild：追加
insertBefore： 在某個元素前新增
removeChild：刪除元素
相關推薦
從零開始學 Web 之 DOM（五）元素的建立
大家好，這裡是「 從零開始學 Web 系列教程 」，並在下列地址同步更新...... +------------------------------------------------------------ github：https://github.com/Daotin/Web 微信公眾號：Web前端之
從零開始學 Web 之 DOM（一）DOM的概念，對標簽操作
關註 1.5 pan 什麽 tin p標簽 nod text == 大家好，這裏是「 Daotin的夢囈 」從零開始學 Web 系列教程。此文首發於「 Daotin的夢囈 」公眾號，歡迎大家訂閱關註。在這裏我會從 Web 前端零基礎開始，一步步學習 Web 相關的知識點，
從零開始學 Web 之 DOM（四）節點
def clas scrip while p標簽 設置 ner 操作 text 大家好，這裏是「 Daotin的夢囈 」從零開始學 Web 系列教程。此文首發於「 Daotin的夢囈 」公眾號，歡迎大家訂閱關註。在這裏我會從 Web 前端零基礎開始，一步步學習 Web 相
從零開始學 Web 之 DOM（六）為元素繫結與解綁事件
大家好，這裡是「 從零開始學 Web 系列教程 」，並在下列地址同步更新...... +------------------------------------------------------------ github：https://github.com/Daotin/Web 微信公眾號：Web前端之
從零開始學 Web 之 DOM（二）對樣式的操作，獲取元素的方式
大家好，這裡是「 Daotin的夢囈 」從零開始學 Web 系列教程。此文首發於「 Daotin的夢囈 」公眾號，歡迎大家訂閱關注。在這裡我會從 Web 前端零基礎開始，一步步學習 Web 相關的知識點，期間也會分享一些好玩的專案。現在就讓我們一起進入 Web 前端學習的冒險之旅吧！ 1、對樣式的操作
從零開始學 Web 之 DOM（三）innerText與innerHTML、自定義屬性
大家好，這裡是「 Daotin的夢囈 」從零開始學 Web 系列教程。此文首發於「 Daotin的夢囈 」公眾號，歡迎大家訂閱關注。在這裡我會從 Web 前端零基礎開始，一步步學習 Web 相關的知識點，期間也會分享一些好玩的專案。現在就讓我們一起進入 Web 前端學習的冒險之旅吧！ 一、相容程式碼 1
從零開始學 Web 之 DOM（七）事件冒泡
>大家好，這裡是「 從零開始學 Web 系列教程 」，並在下列地址同步更新...... > +------------------------------------------------------------ > github：https://github.com/Dao
從零開始學 Web 之 DOM（一）DOM的概念，對標籤操作
大家好，這裡是「 Daotin的夢囈 」從零開始學 Web 系列教程。此文首發於「 Daotin的夢囈 」公眾號，歡迎大家訂閱關注。在這裡我會從 Web 前端零基礎開始，一步步學習 Web 相關的知識點，期間也會分享一些好玩的專案。現在就讓我們一起進入 Web 前端學習的冒險之旅吧！ 一、DOM概念 D
從零開始學 Web 之 Ajax（五）同步異步請求，數據格式
遊記 document 空閑 name center 20px 實現 resp 也會 大家好，這裏是「 從零開始學 Web 系列教程 」，並在下列地址同步更新...... github：https://github.com/Daotin/Web 微信公眾號：Web前端之
從零開始學 Web 之 CSS3（五）transform
transform transform 字面上就是變形，改變的意思。在CSS3中transform主要包括以下幾種：移動 translate，縮放scale，旋轉rotate，翻轉skew，改變旋轉軸心等。 1、元素的移動：translate 作用：使用transform實現元素的移動 語法： /*使用t
從零開始學 Web 之 jQuery（三）元素操作，鏈式程式設計，動畫方法
一、使用css操作元素樣式 1、常規寫法 $("#dv").css("width", "200px"); $("#dv").css("height", "100px"); $("#dv").css("background", "red"); 2、鏈式寫法 $("#dv").css("width", "20
從零開始學 Web 之 Ajax（五）同步非同步請求，資料格式
一、同步請求與非同步請求 同步請求：在使用者進行請求傳送之後，瀏覽器會一直等待伺服器的資料返回，如果網路延遲比較高，瀏覽器就一直卡在當前介面，直到伺服器返回資料才可進行其他操作。 非同步請求：在使用者進行請求傳送之後，瀏覽器可以自由操作頁面中其他的元素，當伺服器放回資料的時候，才觸發相應事件，對返回的資料
從零開始學 Web 之 CSS（五）可見性、內容移除、精靈圖、屬性選擇器、滑動門
大家好，這裡是「 Daotin的夢囈 」從零開始學 Web 系列教程。此文首發於「 Daotin的夢囈 」公眾號，歡迎大家訂閱關注。在這裡我會從 Web 前端零基礎開始，一步步學習 Web 相關的知識點，期間也會分享一些好玩的專案。現在就讓我們一起進入 Web 前端學習的冒險之旅吧！ 一、CSS可見性
從零開始學 Web 之 jQuery（五）操作元素其他屬性，為元素繫結事件
一、操作元素的寬和高 1、方法一 元素.css("width"); 元素.css("height"); 最後得到的是字串型別的，比如 200px。 如果我們在設定為原來寬高2倍的時候，就要先把獲取的寬高轉換成數字型別，再乘以2，這樣操作比較麻煩，有沒有簡單的方法呢？ 2、方法二 元素.width(屬性
從零開始學 Web 之 JavaScript（五）面向物件
大家好，這裡是「 Daotin的夢囈 」從零開始學 Web 系列教程。此文首發於「 Daotin的夢囈 」公眾號，歡迎大家訂閱關注。在這裡我會從 Web 前端零基礎開始，一步步學習 Web 相關的知識點，期間也會分享一些好玩的專案。現在就讓我們一起進入 Web 前端學習的冒險之旅吧！ 一、面向物件 1、
從零開始學 Web 之 jQuery（四）元素的建立新增與刪除，自定義屬性
一、元素的建立新增和刪除 1、方式一：以物件的方式建立元素 append，appendTo ：在被選元素所有子元素的結尾插入內容（增加子元素）。 prepend，prependTo：在被選元素所有子元素的開頭插入元素（增加子元素）。 before：在當前被選元素之後插入內容（相當於增加兄弟元素）。 af
從零開始學 Web 之 ES6（五）ES6基礎語法三
一、Generator Generator 函式是 ES6 提供的一種非同步程式設計解決方案。 Generator 函式有多種理解角度。語法上，首先可以把它理解成，Generator 函式是一個狀態機，封裝了多個內部狀態。 執行 Generator 函式會返回一個遍歷器物件，也就是說，Generator
從零開始學 Web 之 BOM（三）offset，scroll，變速動畫函數
樣式 清理 java mar dde sof mov har width 大家好，這裏是「 從零開始學 Web 系列教程 」，並在下列地址同步更新...... github：https://github.com/Daotin/Web 微信公眾號：Web前端之巔 博客園：
從零開始學 Web 之 jQuery（二）獲取和操作元素的屬性
eight images idt 隱藏 lis 屬性 ner master lin 大家好，這裏是「 從零開始學 Web 系列教程 」，並在下列地址同步更新...... github：https://github.com/Daotin/Web 微信公眾號：Web前端之巔
從零開始學 Web 之 jQuery（六）為元素綁定多個相同事件，解綁事件
png 好用 添加 方式 執行 存在 區別 也會 地址 大家好，這裏是「 從零開始學 Web 系列教程 」，並在下列地址同步更新...... github：https://github.com/Daotin/Web 微信公眾號：Web前端之巔 博客園：http://ww