只创建一个元素时!
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
div {
width:200px;
height:250px;
border:2px solid pink;
}
<input type="button" value="创建一个按钮" id="btn1"/>
<div id="dv">
<script src="common.js">
//有则删除,无则创建
// my$("btn1").onclick = function () {
// //判断div中有没有这个按钮,有就删除
// //判断这个按钮的子元素是否存在
// if(my$("btn")){ //如果为true就有
// my$("dv").removeChild(my$("btn"));
// }
// //否则(没有btn)就创建一个
// var obj = document.createElement("input");
// obj.type = "button";
// obj.value = "按钮";
// obj.id = "btn";
// my$("dv").appendChild(obj);
// };
my$("btn1").onclick =function () {
if(!my$("btn")){
var obj = document.createElement("input");
obj.type ="button";
obj.value ="按钮";
obj.id ="btn";
my$("dv").appendChild(obj);
}
};
</html>
通过本次学习主要掌握了:
根据“有则删除,无则创建”这一条件进行编程。if语句判断是否有btn这一新建的按钮,有两个方法,
方法一:当有btn这一元素时,移除;反之,就创建一个btn及其属性,最后在创建的input标签里追加一个btn的元素就好了。
方法二:直接判定当没有btn这一元素时,创建一个btn及其属性,最后在创建的input标签里追加一个btn的元素就好了。