首页 > 代码库 > Javascript操作DOM元素
Javascript操作DOM元素
1、动态创建DOM的步骤
（1）调用document的createElement方法来创建具有指定标签的DOM对象
（2）然后通过调用某个元素的appendChild();方法将新创建的元素添加到相应的元素下。
2、操作DOM的方法
createElement(‘element‘);创建一个节点
document.createElement(‘<input type="button" value="http://www.mamicode.com/hello" />‘);快速创建元素，并且赋值，但是注意设置的inner部分不会被设置 document.createElement(‘<a href="http://www.mamicode.com/www.baidu.com">百度</a>‘);注意："百度"这两个字写不进去
appendChild(node);追加一个节点
removeChild(node);移除一个节点
replaceChild(new,old);替换一个节点
insertBefore(new,参照);把节点加到前面（插到某个节点前面）
firstChild
lastChild
3、示例代码
示例代码：添加一个div元素
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>Javascript测试</title>
<script type="text/javascript">
onload=function(){
document.getElementById(‘btn‘).onclick=function(){
var divObj = document.createElement(‘div‘);
document.body.appendChild(divObj);
};
};
</script>
</head>
<body>
<input type="button" id="btn" value="http://www.mamicode.com/创建div"/>
</body>
</html>效果图
示例代码：添加一个div元素（带样式）
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>Javascript测试</title>
<script type="text/javascript">
onload=function(){
document.getElementById(‘btn‘).onclick=function(){
var divObj = document.createElement(‘div‘);
divObj.style.width = "300px";
divObj.style.height="180px";
divObj.style.border="solid 1px red";
divObj.style.margin = "5px";
document.body.appendChild(divObj);
};
};
</script>
</head>
<body>
<input type="button" id="btn" value="http://www.mamicode.com/创建div"/>
</body>
</html>效果图
示例代码：在div元素中添加按钮和文本框
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>Javascript测试</title>
<script type="text/javascript">
var myOrder = 0;
onload = function(){
document.getElementById(‘btnCreateDiv‘).onclick=function(){
if(!document.getElementById(‘dv‘))
{
var divObj = document.createElement("div");
divObj.id = "dv";
divObj.style.width = "300px";
divObj.style.height = "180px";
divObj.style.border = "solid 1px red";
divObj.style.margin = "2px";
document.body.appendChild(divObj);
}
};
document.getElementById(‘btnCreateInput‘).onclick= function () {
var divObj = document.getElementById(‘dv‘);
if(divObj)
{
myOrder++;
var inputObj = document.createElement("input");
inputObj.type = "button";
inputObj.value = "按钮" + myOrder;
divObj.appendChild(inputObj);
}
};
document.getElementById(‘btnCreateTxt‘).onclick = function(){
var divObj = document.getElementById(‘dv‘);
if(divObj){
myOrder++;
var inputObj = document.createElement("input");
inputObj.type = "text";
inputObj.value = "文本框"+myOrder;
divObj.insertBefore(inputObj,divObj.firstChild);
}
};
};
</script>
</head>
<body>
<input type="button" id="btnCreateDiv" value="http://www.mamicode.com/创建层"/>
<input type="button" id="btnCreateInput" value="http://www.mamicode.com/创建按钮"/>
<input type="button" id="btnCreateTxt" value="http://www.mamicode.com/创建文本框"/>
</body>
</html>效果图一（firefox下第二个按钮不能用，不知道是为什么）
效果图二
示例代码：删除div中所有元素
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>Javascript测试</title>
<script type="text/javascript">
var myOrder = 0;
onload = function(){
document.getElementById(‘btnCreateDiv‘).onclick=function(){
if(!document.getElementById(‘dv‘))
{
var divObj = document.createElement("div");
divObj.id = "dv";
divObj.style.width = "300px";
divObj.style.height = "180px";
divObj.style.border = "solid 1px red";
divObj.style.margin = "2px";
document.body.appendChild(divObj);
}
};
document.getElementById(‘btnCreateInput‘).onclick= function () {
var divObj = document.getElementById(‘dv‘);
if(divObj)
{
myOrder++;
var inputObj = document.createElement("input");
inputObj.type = "button";
inputObj.value = "按钮" + myOrder;
divObj.appendChild(inputObj);
}
};
document.getElementById(‘btnCreateTxt‘).onclick = function(){
var divObj = document.getElementById(‘dv‘);
if(divObj){
myOrder++;
var inputObj = document.createElement("input");
inputObj.type = "text";
inputObj.value = "文本框"+myOrder;
divObj.insertBefore(inputObj,divObj.firstChild);
}
};
document.getElementById(‘btnDelete‘).onclick = function(){
var divObj = document.getElementById(‘dv‘);
if(divObj){
while(divObj.firstChild)
{
divObj.removeChild(divObj.firstChild);
}
}
};
};
</script>
</head>
<body>
<input type="button" id="btnCreateDiv" value="http://www.mamicode.com/创建层"/>
<input type="button" id="btnCreateInput" value="http://www.mamicode.com/创建按钮"/>
<input type="button" id="btnCreateTxt" value="http://www.mamicode.com/创建文本框"/>
<input type="button" id="btnDelete" value="http://www.mamicode.com/删除div中所有元素"/>
</body>
</html>效果图
Javascript操作DOM元素
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。