document.write('新设置的内容<p>标签也可以生成</p>'); document.write()创建元素,缺陷:如果是在页面加载完毕后,此时通过这种方式创建元素,那么页面上存在的所有的内容全部被干掉=
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>title</title></head><body><input type="button" value="创建一个p" id="btn"/>小苏是一个快乐的小男孩,人家今年才38岁.好帅哦<script src="common.js"></script><script>
//document.write("标签代码及内容");
my$("btn").onclick=function () {
document.write("<p>这是一个p</p>");
};
// document.write("<p>这是一个p</p>");</script></body></html> var box = document.getElementById('box');box.innerHTML = '新内容<p>新标签</p>'; <!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>title</title>
<style>
div{
width: 300px;
height: 200px;
border:2px solid pink;
}
</style></head><body><input type="button" value="创建一个p" id="btn" /><div id="dv"></div><script src="common.js"></script><script>
//点击按钮,在div中创建一个p标签
//第二种方式创建元素: 对象.innerHTML="标签代码及内容";
my$("btn").onclick=function () {
my$("dv").innerHTML="<p>他日若水凌云志，敢笑黄巢不丈夫</p>";
};</script></body></html> var div = document.createElement('div');document.body.appendChild(div); <!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>title</title>
<style>
div {
width: 200px;
height: 150px;
border: 2px dashed pink;
}
</style></head><body><input type="button" value="创建p" id="btn"/><div id="dv"></div><script src="common.js"></script><script>
//第三种方式创建元素
//document.createElement("标签名字");对象
//把元素追加到父级元素中
//点击按钮,在div中创建一个p
my$("btn").onclick = function () {
//创建元素的
var pObj = document.createElement("p");
setInnnerText(pObj, "这是一个p");
//把创建后的子元素追加到父级元素中
my$("dv").appendChild(pObj);
};</script></body></html> 可以借助字符串或数组的方式进行替换，再设置给innerHTML
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>title</title>
<style>
div {
width: 300px;
height: 400px;
background-color: green;
}
</style></head><body><input type="button" value="创建列表" id="btn"/><div id="dv"></div><script src="common.js"></script><script>
// my$("btn").οnclick=function () {
// my$("dv").innerHTML="<ul><li>杨过</li><li>小龙女</li><li>张无忌</li> <li>张三丰</li></ul>";
// };
var names = ["杨过", "郭靖", "张无忌", "张三丰", "乔峰", "段飞", "丁棚"];
my$("btn").onclick = function () {
var str = "<ul style='list-style-type: none;cursor: pointer'>";
//根据循环创建对应对数的li
for (var i = 0; i < names.length; i++) {
str += "<li>" + names[i] + "</li>";
}
str += "</ul>";
my$("dv").innerHTML = str;
//代码执行到这里,li已经有了
//获取所有的li,遍历,添加鼠标进入事件,鼠标离开事件
var list = my$("dv").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 = "";
};
}
};</script></body></html> <!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>title</title>
<style>
div{
width: 200px;
height: 200px;
border: 1px solid red;
}
</style></head><body><input type="button" value="创建表格" id="btn"/><div id="dv"></div><script src="common.js"></script><script>
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"}
];
//点击按钮创建表格
my$("btn").onclick=function () {
//创建table加入到div中
var tableObj=document.createElement("table");
tableObj.border="1";
tableObj.cellPadding="0";
tableObj.cellSpacing="0";
my$("dv").appendChild(tableObj);
//创建行,把行加入到table中
for(var i=0;i<arr.length;i++){
var dt=arr[i];//每个对象
var trObj=document.createElement("tr");
tableObj.appendChild(trObj);
//创建第一个列,然后加入到行中
var td1=document.createElement("td");
td1.innerText=dt.name;
trObj.appendChild(td1);
//创建第二个列
var td2=document.createElement("td");
td2.innerHTML="<a href="+dt.href+">"+dt.name+"</a>";
trObj.appendChild(td2);
}
};</script></body></html>
联系客服
