API之元素的创建
目录
- 元素创建的三种方式
- 元素相关方法
- 只创建一个元素的两种方法
元素创建的三种方式
- document.write（'标签的代码和内容'）
注意：使用document.write('标签代码和内容')有缺陷：如果在页面加载完毕后，此时通过这种方式创建元素，那么页面上存在的所有内容会全部被干掉
<body>
<input type="button" value="创建一个文本" id='btn'>
<script>
var btn = document.getElementById('btn');
btn.onclick = function() {
document.write('<p> 这是一个p标签</p>');
}
//使用document.write('标签代码和内容')有缺陷：如果在页面加载完毕后，此时通过这种方式创建元素，那么页面上存在的所有内容会全部被干掉
</script>
</body>
- 对象.innerHTML = '标签及代码'
<body>
<input type="button" value='给div添一个标签' id='btn'>
<div id='dv'></div>
<script>
var btn = document.getElementById('btn');
btn.onclick = function() {
document.getElementById('dv').innerHTML = '<p>晚安</p>'
}
</script>
</body>
- documen.createElement（'标签的名字'）
<body>
<input type="button" value="点击创建一个p标签" id="btn">
<div id="dv"></div>
<script>
var btn = document.getElementById('btn');
btn.onclick = function() {
//创建元素
var pObj = document.createElement('p');
pObj.innerHTML = '<p>这是一个p标签</p>';
//把创建好的元素追加到父级元素中
document.getElementById('dv').appendChild(pObj);
}
</script>
</body>
元素的相关方法
- 被追加的父级元素.appendChild(要追加的子元素);//追加子元素
- 被追加的父级元素.insertBefore(追加的子元素, dv.firstElementChild); 用追加的子元素替换被追加的父级元素的第一个子级元素
- 被追加的父级元素.replaceChild(追加的子元素, dv.firstElementChild); 用追加的子级元素替换被追加的父级元素的第一个子级元素
- 父级元素.removeChild(dv.firstElementChild); 删除父级元素的第一个子级元素
<style>
.dv {
width: 150px;
height: 300px;
border: 2px solid #def;
}
</style>
<body>
<input type="button" value='显示效果' id="btn">
<input type="button" value='删除第一个子元素' id="btn1">
<input type="button" value='删除所有子元素' id="btn2">
<div id="dv">
<!-- <p>这是一个p标签</p> -->
</div>
<script>
var btn = document.getElementById('btn');
var dv = document.getElementById('dv');
dv.className = 'dv';
var i = 0;
btn.onclick = function() {
i++;
var inputObj = document.createElement('input');
inputObj.type = 'button';
inputObj.value = '按钮' + i;
//dv.appendChild(inputObj);//追加子元素
//把新的子元素插入到第一个子元素的前面
dv.insertBefore(inputObj, dv.firstElementChild);
//用新的子元素替换原来的元素
//dv.replaceChild(inputObj, dv.firstElementChild);
}
var btn1 = document.getElementById('btn1');
btn1.onclick = function() {
//删除第一个子元素
dv.removeChild(dv.firstElementChild);
}
document.getElementById('btn2').onclick = function() {
//删除所有的子元素
//判断父级元素中有没有第一个子元素
while (dv.firstElementChild) {
dv.removeChild(dv.firstElementChild);
}
}
</script>
只创建一个元素的两种解决方法
口诀：有则删除，无则创建
<style>
div {
width: 150px;
height: 300px;
border: 2px solid #abc;
}
</style>
<body>
<input type="button" value="在div中创建一个按钮" id="btn">
<div id='dv'></div>
<script>
//有则删除-----删除后再创建
// var btn = document.getElementById('btn');
// btn.onclick = function() {
// if (document.getElementById('btn2')) {//如果为true就有，那么就删除之后再创建
// dv.removeChild(document.getElementById('btn2'));
// }
// var inObj = document.createElement('input');
// inObj.type = 'button';
// inObj.id = 'btn2';
// inObj.value = '我是被创建的button';
// var dv = document.getElementById('dv');
// dv.appendChild(inObj);
// }
//无则创建
var btn = document.getElementById('btn');
btn.onclick = function() {
if (!document.getElementById('btn2')) { // 如果document.getElementById('btn2')为true，证明名为btn2的按钮已经存在，不再创建；若为false，证明没有则创建
var inObj = document.createElement('input');
inObj.type = 'button';
inObj.id = 'btn2';
inObj.value = '我是被创建的button';
var dv = document.getElementById('dv');
dv.appendChild(inObj);
}
}
</script>
