欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

【JavaScript-练习】删除、替换、克隆元素

程序员文章站 2022-03-25 16:42:02
...

使用纯JS完成网页中某个特定标签得删除，替换以及克隆

<!DOCTYPE HTML>
<html>
  <head>
    <title>02-删除替换克隆标签.html</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <style type="text/css">
    	#one{
    		border: 1px solid blue;
    		background-color: green;
    		width: 300px;
    		height: 150px;
    	}
    	#two{
    		border: 1px solid blue;
    		background-color: aqua;
    		width: 250px;
    		height: 100px;
    	}
    </style>
    <script type="text/javascript">
        //    删除元素
            function demo() {
                var one = document.getElementById("one");
                one.remove();
                // document.body.removeChild(one);
            }

    //     替换元素
        function demo2() {
            var one = document.getElementById("one");
            var two = document.getElementById("two");
            one.replaceWith(two);
        }

    //    克隆和替换
        function demo3() {
            var one = document.getElementById("one");
            var two = document.getElementById("two");
            one.replaceWith(two.cloneNode(one));
        }
    </script>
  </head>
  <body>
  	<div id="one" > 
  		xxxxxx
  	</div>
  	<div id="two" > 
  		yyyyyy
  	</div>
  	<input type="button" value="删除元素" onclick="demo()"/>
  	<input type="button" value="替换元素" onclick="demo2()"/>
  	<input type="button" value="克隆和替换" onclick="demo3()"/>
  </body>
</html>
相关标签： JavaWeb学习

上一篇： javawebDay1 xml与tomcat

下一篇： 【JavaScript-练习】二级联动

推荐阅读