从零开始学 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 之 DOM（二）对样式的操作，获取元素的方式
大家好,这里是「 Daotin的梦呓 」从零开始学 Web 系列教程.此文首发于「 Daotin的梦呓 」公众号,欢迎大家订阅关注.在这里我会从 Web 前端零基础开始,一步步学习 Web 相关的知识 ...
- 从零开始学 Web 之 DOM（六）为元素绑定与解绑事件
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... +-------------------------------------------------------- ...
- 从零开始学 Web 之 DOM（一）DOM的概念，对标签操作
大家好,这里是「 Daotin的梦呓 」从零开始学 Web 系列教程.此文首发于「 Daotin的梦呓 」公众号,欢迎大家订阅关注.在这里我会从 Web 前端零基础开始,一步步学习 Web 相关的知识 ...
- 从零开始学 Web 之 DOM（三）innerText与innerHTML、自定义属性
大家好,这里是「 Daotin的梦呓 」从零开始学 Web 系列教程.此文首发于「 Daotin的梦呓 」公众号,欢迎大家订阅关注.在这里我会从 Web 前端零基础开始,一步步学习 Web 相关的知识 ...
- 从零开始学 Web 之 DOM（四）节点
大家好,这里是「 Daotin的梦呓 」从零开始学 Web 系列教程.此文首发于「 Daotin的梦呓 」公众号,欢迎大家订阅关注.在这里我会从 Web 前端零基础开始,一步步学习 Web 相关的知识 ...
- 从零开始学 Web 之 DOM（七）事件冒泡
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... +-------------------------------------------------------- ...
- 从零开始学 Web 系列教程
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新…… github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:http:/ ...
- 从零开始学 Web 之 jQuery（五）操作元素其他属性，为元素绑定事件
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...
- 从零开始学 Web 之 Vue.js（五）Vue的动画
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...
随机推荐
- swift 监测内存泄漏 MLeaksFinder
使用MLeaksFinder检测项目内存泄露总结 https://www.cnblogs.com/ocarol/p/5288497.html
- Java第四次实验
实验一: Android Stuidio的安装测试: 参考<Java和Android开发学习指南(第二版)(EPUBIT,Java for Android 2nd)>第二十四章: 参考ht ...
- 一句话shell【php】
1.mysql执行语句拿shell Create TABLE a (cmd text NOT NULL); Insert INTO a (cmd) VALUES('<?php @eval($_P ...
- JQUERY-定义-查找
正课: 1. 什么是jQuery 2. 如何使用jQuery 3. 查找 1. 什么是jQuery 第三方开发的 执行DOM操作的 极简化的 函数库 第三方: 下载 执行DOM操作: 学习jQuery ...
- Python开发——2.基本数据类型之数字和字符串
一.基本数据类型 基本数据类型包括:数字(int).字符串(str).列表(list).元祖(tuple).字典(dict).布尔值(bool). 查看输出数据的类型 a = "123&qu ...
- 2.3.7synchronized代码块有volatile同步的功能
关键字synchronized可以使多个线程访问同一个资源具有同步性,而且他还具有将线程工作内存中的私有变量与公共内存中的变量同步的功能. package com.cky.thread; /** * ...
- Chapter7 抑癌基因
一.实验证明,如果肿瘤不是肿瘤病毒产生时,与正常细胞融合后,其恶性表型是隐形的 二. 家族性视网膜母细胞瘤的形成模型 如何使得一个细胞获得两个突变(两次随机的突变可能性太小) 模型一:有丝分裂的同源重 ...
- Android-Java-构造方法内存图
描述Dog对象: package android.java.oop07; // 描述Dog对象/实体 public class Dog { private String name; private i ...
- .NET Core微服务之路：基于gRPC服务发现与服务治理的方案
重温最少化集群搭建,我相信很多朋友都已经搭建出来,基于Watch机制也实现了出来,相信也有很多朋友有了自己的实现思路,但是,很多朋友有个疑问,我API和服务分离好了,怎么通过服务中心进行发现呢,这个过 ...
- 重新编译安装swoole支持OpenSSL
1.下载:wget http://pecl.php.net/get/swoole-1.9.22.tgz 2.解压:tar zxvf swoole-1.9.22.tgz 3.扩展模块:cd swoole ...