DOM常用方法之插入，删除，添加等。

最新推荐文章于 2024-09-02 17:34:07 发布

Web开发_Struggle

最新推荐文章于 2024-09-02 17:34:07 发布

阅读量559

点赞数

分类专栏： web，HTML5，js，dom 文章标签： web 前端 dom

本文链接：https://blog.csdn.net/Web_Struggle/article/details/78208526

版权

web，HTML5，js，dom 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

DOM相信大家都见得多，这里介绍常见的操作。

0、createElement();创建

1、appendChild();追加节点

2、removeChild();删除

3、insertBefore(节点, 原有节点) 在已有元素前插入

createElement();创建：

appendChild();追加节点

用法：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Document</title>
</head>
<body>
		<script type="text/javascript">
			window.οnlοad=function ()
			{
				var oBtn=document.getElementById('btn1');
				var oTxt=document.getElementById('txt1');
				var oUl=document.getElementById('ul1');
				
				oBtn.οnclick=function ()
				{
					var oLi=document.createElement('li');
					
					oLi.innerHTML=oTxt.value;
					
					//父.appendChild(子节点)
					oUl.appendChild(oLi);
				}
			}
			</script>
			<input id="txt1" type="text" />
			<input id="btn1" type="button" value="创建Li"/>
			<ul id="ul1">
				<li>aaa</li>
			</ul>
</body>
</html>

removeChild();删除

用法：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <script>
        window.onload = function(){
            var oul = document.getElementById("ul1");
            var oa = document.getElementsByTagName("a");
            for( var i = 0; i< oa.length; i++){
                oa[i].onclick = function(){
                    oul.removeChild(this.parentNode);
                }
            }
        };
    </script>
    <ul id="ul1">
        <li>啊啊<a href="javascript:;">删除</a></li>
        <li>啊啊啊啊<a href="javascript:;">删除</a></li>
        <li>啊啊啊啊<a href="javascript:;">删除</a></li>
        <li>啊啊啊啊<a href="javascript:;">删除</a></li>
        <li>啊啊啊啊<a href="javascript:;">删除</a></li>
    </ul>
</body>
</html>

insertBefore(节点, 原有节点) 在已有元素前插入

用法：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript">
//父.insertBefore(子节点, 谁之前)

window.οnlοad=function ()
{
	var oBtn=document.getElementById('btn1');
	var oTxt=document.getElementById('txt1');
	var oUl=document.getElementById('ul1');
	
	oBtn.οnclick=function ()
	{
		var oLi=document.createElement('li');
		var aLi=oUl.getElementsByTagName('li');
		
		oLi.innerHTML=oTxt.value;
		
		if(aLi.length==0)
		{
			oUl.appendChild(oLi);
		}
		else
		{
			//更改原来没有的li元素
			oUl.insertBefore(oLi, aLi[0]);
		}
	}
}
</script>
</head>

<body>
<input id="txt1" type="text" />
<input id="btn1" type="button" value="创建Li"/>
<ul id="ul1">
</ul>
</body>
</html>

Web开发_Struggle

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
DOM常用方法之插入，删除，添加等。

DOM相信大家都见得多，这里介绍常见的操作。0、createElement();创建1、appendChild();追加节点2、removeChild();删除3、insertBefore(节点, 原有节点)在已有元素前插入createElement();创建：appendChild();追加节点用法： Document
复制链接

扫一扫