修改元素
function
fun(){
//获取到指定元素
var
p1 = document.getElementById(
"p1"
);
p1.innerText =
"我被单击了！"
;
}
通过.innerText属性可读取或设置标签的内容文本
function
fun(){
//获取到指定元素
var
p1 = document.getElementById(
"p1"
);
p1.innerHTML =
"我被单击了！<br>换行了"
;
}
也可以通过innerHTML属性获取或设置内容文本
（1） 修改样式
A．xxx．style.属性名=“值”
B．xxx．classname=“…”(相当于修改了class的属性)
<style>
.style1{
color:red;
font-size:20px;
text-decoration:underline;
}
.style2{
color:blue;
font-size:32px;
text-decoration:line-through;
}
</style>
</head>
<body>
<p id=
"p1"
>修改样式测试</p>
<input type=
"button"
value=
"样式一"
onclick=
"style1()"
>
<input type=
"button"
value=
"样式二"
onclick=
"style2()"
>
</body>
<script>
var
p1 = document.getElementById(
"p1"
);
function
style1(){
p1.className =
"style1"
}
function
style2(){
p1.className =
"style2"
}
</script>
</html>
CreateElement建一个元素节点
createTextNode创建一个文本节点
appendChild添加子节点
removeChild 删除子节点
<body>
<div id=
"div1"
>
</div>
<input type=
"button"
value=
"添加段落"
onclick=
"add()"
>
</body>
<script>
//全局变量
var
index = 1; //设置一个变量好区分一共创建了几次
function
add(){
//创建一个段落标签
var
p = document.createElement(
"p"
);
//创建文本节点
var
content=
"第"
+index+
"段落"
;
var
txt = document.createTextNode(content);
//创建文本节点添加的段落
p.appendChild(txt);
//将段落添加到div中
var
div1 = document.getElementById(
"div1"
);
div1.appendChild(p);
index++ //代表第几次
}
</script>
<body>
<div id=
"div1"
>
<p id=
"p1"
>第1段落 </p>
<p id=
"p2"
>第2段落 </p>
<p id=
"p3"
>第3段落 </p>
<p id=
"p4"
>第4段落 </p>
</div>
<input type=
"button"
value=
"删除第二段"
onclick=
"del()"
>
</body>
<script>
function
del(){
//先找到父节点
var
div1 = document.getElementById(
"div1"
);
//再找到要删除的节点
var
p2 = document.getElementById(
"p2"
);
//将要删除的节点从父节点中移除
div1.removeChild(p2);
}
</script>
</html>