Bjb Code

创建标签

JS 可以通过 DOM（文档对象模型）来创建 HTML 标签。

创建方法

// 方法1：document.write();
// 如果是在页面加载完毕后，使用这种方式，会将 html 里面其他标签都清空，只留这个增加的（恰好在页面加载时使用没问题）
document.getElementById("create").onclick = function(){
	document.write("<p>增加的标签</p>");
}

// 方法2：元素.innerHTML = "";
// 这种方式会将 dv4 所在标签内的，子标签都清空，只留增加的
document.getElementById("create").onclick = function(){
	document.getElementById("dv4").innerHTML = "<p>哈哈哈哈</p>";
}

// 方法3
// 这种方式不清空之前的标签，只增加
// 第一步：var obj = document.createElement("标签名");
// 第二步：元素.appendChild(obj);
document.getElementById("create").onclick = function(){
	// 创建一个 p 标签，创建完返回对象
	var obj = document.createElement("p");
	// 创建一个 input 标签，并制定 type 和 value
	var inputObj = document.createElement("input");
	inputObj.type = "button";
	inputObj.value = "按钮"；
	// 直接增加（添加到子节点的末尾）
	document.getElementById("dv4").appendChild(obj);
	document.getElementById("dv4").appendChild(inputObj);
	// 插入元素（插入到指定元素的前面）
	document.getElementById("dv4").insertBefore(obj,document.getElementById("dv4").firstElementChild);
}

创建标签

// 创建图片标签
document.getElementById("create").onclick=function(){
	document.getElementById("dv4").innerHTML = "<img src=desk.jpg/>";
}

// 根据数组创建列表标签，并且鼠标划过时列表变色
document.getElementById("create2").onclick = function(){
	var arr = ["新闻标题1","新闻标题2","新闻标题3","新闻标题4","新闻标题5","新闻标题6"];
	var str = "<ul>";
	for(var i=0; i<arr.length; i++){
		str += "<li>" + arr[i] + "</li>";
	}
	str += "</ul>";
	document.getElementById("uu").innerHTML = str;
	// 代码执行到这里，li 已经有了
	// 获取所有 li，遍历，添加鼠标进入和离开事件
	var list = myGetById("uu").getElementsByTagName("li");
	for(var i=0; i<list.length; i++){
		// 鼠标进入
		list[i].onmouseover = function(){
			this.style.backgroundColor = "yellow";
		}

		//鼠标离开
		list[i].onmouseout = function(){
			this.style.backgroundColor = "";
		}
	}
}

// 点击按钮动态的创建列表，把列表加到 div 中
var kungfu = ["降龙十八掌","玉女心经","葵花宝典","吸星大法","如来神掌"];
document.getElementById("btn").onclick = function () {
	// 创建 ul，把 ul 立刻加入到父级元素 div 中
	var ulObj = document.createElement("ul");
	document.getElementById("dv").appendChild(ulObj);
	// 动态的创建 li，加到 ul 中
	for (var i=0; i<kungfu.length; i++) {
		var liObj = document.createElement("li");
		// 设置 li 中间的文字内容
		liObj.innerHTML = kungfu[i];
		ulObj.appendChild(liObj);
		// 为 li 添加鼠标进入事件
		// 如果是循环的方式添加事件，推荐用命名函数
		// 如果不是循环的方式添加事件，推荐使用匿名函数
		liObj.onmouseover = mouseoverHandle;
		// 为 li 添加鼠标离开事件
		// 如果是循环的方式添加事件，推荐用命名函数
		// 如果不是循环的方式添加事件，推荐使用匿名函数
		liObj.onmouseout = mouseoutHandle;
	}
};
// 此位置在按钮的点击事件的外面
function mouseoverHandle() {
	this.style.backgroundColor = "red";
}
function mouseoutHandle() {
	this.style.backgroundColor = "";
}

// 点击按钮创建表格
var arr=[
	{name:"百度",href:"http://www.baidu.com"},
	{name:"谷歌",href:"http://www.google.com"},
	{name:"优酷",href:"http://www.youku.com"},
	{name:"土豆",href:"http://www.tudou.com"},
	{name:"快播",href:"http://www.kuaibo.com"},
	{name:"爱奇艺",href:"http://www.aiqiyi.com"}
];
document.getElementById("btn").onclick = function () {
	// 创建 table 加入到 div 中
	var tableObj = document.createElement("table");
	tableObj.border="1";
	tableObj.cellPadding="0";
	tableObj.cellSpacing="0";
	document.getElementById("dv").appendChild(tableObj);
	// 创建行，把行加入到 table 中
	for(var i=0; i<arr.length; i++){
		// 每个对象
		var dr = arr[i];
		var trObj = document.createElement("tr");
		tableObj.appendChild(trObj);
		// 创建第一个列，然后加入到行中
		var td1 = document.createElement("td");
		td1.innerText = dr.name;
		trObj.appendChild(td1);
		// 创建第二个列
		var td2 = document.createElement("td");
		td2.innerHTML = "<a href="+dr.href+">"+dr.name+"</a>";
		trObj.appendChild(td2);
	}
}

// 无论点击多少次，都只添加一个元素
// 第一种：先判断有没有，有就删除，然后再创建
document.getElementById("btn").onclick = function () {
	// 判断 div 中有没有这个按钮，有就删除
	if(document.getElementById("btn2")){ // 如果为 true 就有
		document.getElementById("dv").removeChild(document.getElementById("btn2"));
	}
	var obj = document.createElement("input");
	obj.type = "button";
	obj.value = "按钮";
	obj.id = "btn2";
	document.getElementById("dv").appendChild(obj);
}

//第二种：直接根据id判断存不存在，不存在就新增
document.getElementById("btn").onclick = function () {
	// 判断这个按钮的元素是否存在
	if(!document.getElementById("btn2")){ // 如果为 true 就有
		var obj = document.createElement("input");
		obj.type = "button";
		obj.value = "按钮";
		obj.id = "btn2";
		document.getElementById("dv").appendChild(obj);
	}
}