您的位置：首页 > Web前端 > JavaScript

JavaScript——DOM操作应用

2017-01-21 22:25 387 查看

创建DOM元素

appendChild添加到父级的末尾

父级.appendChild(子节点)

var oLi = document.createElement(‘li’);创建节点

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
window.onload = function (){
var oBtn = document.getElementById('btn1');
var oUl = document.getElementById('ul1');
var oTxt = document.getElementById('txt');

oBtn.onclick = function(){
var oLi = document.createElement('li');
oLi.innerHTML = oTxt.value;
oUl.appendChild(oLi);
}
}
</script>
</head>
<body>
<input id="txt" type="text">
<input id="btn1" type="button" value="创建li" />
<ul id="ul1"></ul>
</body>
</html>

每次点击按钮，就会出现一个li的列表

在文本框中每输入的内容，都会在li列表中显示出来

插入DOM元素

父级.insertBefore(子节点，在谁之前)

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
window.onload = function (){
var oBtn = document.getElementById('btn1');
var oUl = document.getElementById('ul1');
var oTxt = document.getElementById('txt');

oBtn.onclick = function(){
var oLi = document.createElement('li');
var aLi = oUl.getElementsByTagName('li');

oLi.innerHTML = oTxt.value;

if (aLi.length > 0) {
oUl.insertBefore(oLi, aLi[0]);
} else {
oUl.appendChild(oLi);
}
}
}
</script>
</head>
<body>
<input id="txt" type="text">
<input id="btn1" type="button" value="创建li" />
<ul id="ul1"></ul>
</body>
</html>

类似论坛、微博等，可以插入到第一个节点

删除DOM元素

父级. removeChild(子节点)

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
window.onload = function(){

var aA = document.getElementsByTagName('a');
var oUl = document.getElementById('ul1');

for (var i = 0; i < aA.length; i++) {
aA[i].onclick = function (){
oUl.removeChild(this.parentNode);
}
};
}
</script>
</head>
<body>
<ul id="ul1">
<li>gsifgcbweiu<a href="javascript:;">删除</a></li>
<li>uegvwr<a href="javascript:;">删除</a></li>
<li>168<a href="javascript:;">删除</a></li>
<li>ujuybfgcsd<a href="javascript:;">删除</a></li>
<li>184916<a href="javascript:;">删除</a></li>
</ul>
</body>
</html>

点击删除的时候，li列表的父级会删除

文档碎片

createDocumentFragment创建文档碎片

Document

window.onload = function(){
var oUl = document.getElementById('ul1');
var oFrag = document.createDocumentFragment();

for (var i = 0; i

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航