DOM操作：创建、插入、删除DOM元素，文档碎片

最新推荐文章于 2022-02-18 17:49:20 发布

o0o0o0o0o0oo

最新推荐文章于 2022-02-18 17:49:20 发布

阅读量168

点赞数

本文链接：https://blog.csdn.net/o0o0o0o0o0oo/article/details/106709913

版权

javascript 专栏收录该内容

25 篇文章 0 订阅

订阅专栏

创建DOM元素
createElement(标签名) 创建一个节点
appendChild(节点) 追加一个节点
eg：为ul插入li
插入元素
insertBefore(节点, 原有节点) 在已有元素前插入
eg：倒序插入li
删除DOM元素
removeChild(节点) 删除一个节点
eg：删除li
文档碎片
文档碎片可以提高DOM操作性能(理论上)
文档碎片原理
document.createDocumentFragment()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
<script>
    window.onload=function()
    {   
        //eg1，eg2
        //当点击插入时，文本框的内容直接插入到ul第一个li
        var oTxt=document.getElementById('txt1');
        var oBtn=document.getElementById('but1');
        var oUl=document.getElementById('ul1');

        oBtn.onclick=function()
        {
            var oLi=document.createElement('li');
            var aLi=oUl.getElementsByTagName('li')
            oLi.innerHTML=oTxt.value;
            
            if(aLi.length>0)
            {
                // insertBefore(节点, 原有节点)
                oUl.insertBefore(oLi,aLi[0]);
            }
            else{
                //父级.appendChild(子节点);
                oUl.appendChild(oLi);
            }
        };
        
        //当点击删除时，对应的li会被删除
        var aA=document.getElementsByTagName('a');
        var oUl2=document.getElementById('ul2');

        for(var i = 0; i < aA.length; i++)
        {
            aA[i].onclick=function()
            {   
                //父级.removeChild(节点);
                oUl2.removeChild(this.parentNode);
            };
        }

        
    };
</script>
</head>
<body>
    <input id="txt1" type="text ">
    <input id="but1" type="button" value="创建">
    <ul id="ul1">

    </ul>

    <ul id="ul2">
        <li>adad<a href="javascript:;">删除</a></li>
        <li>wqwe<a href="javascript:;">删除</a></li>
        <li>zczad<a href="javascript:;">删除</a></li>
        <li>adasda<a href="javascript:;">删除</a></li>
        <li>qweqr<a href="javascript:;">删除</a></li>
        <li>acaq<a href="javascript:;">删除</a></li>
    </ul>
</body>
</html>

文档碎片

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script>
window.onload=function ()
{
	var oUl=document.getElementById('ul1');
	//文档碎片
	var oFrag=document.createDocumentFragment();
	
	for(var i=0;i<10000;i++)
	{
		var oLi=document.createElement('li');
		
		//先加入到文档碎片
		oFrag.appendChild(oLi);
	}
	
	oUl.appendChild(oFrag);
};
</script>
</head>

<body>
<ul id="ul1">
</ul>
</body>
</html>

o0o0o0o0o0oo

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
DOM操作：创建、插入、删除DOM元素，文档碎片

创建DOM元素createElement(标签名) 创建一个节点appendChild(节点) 追加一个节点eg：为ul插入li插入元素insertBefore(节点, 原有节点) 在已有元素前插入eg：倒序插入li删除DOM元素removeChild(节点) 删除一个节点eg：删除li文档碎片文档碎片可以提高DOM操作性能(理论上)文档碎片原理document.createDocumentFragment()<!DOCTYPE html>&lt.
复制链接

扫一扫

专栏目录