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

最新推荐文章于 2021-03-14 23:16:51 发布

愿所奋斗皆所得

最新推荐文章于 2021-03-14 23:16:51 发布

阅读量288

点赞数

分类专栏： JavaWeb学习文章标签： html js javascript html5

本文链接：https://blog.csdn.net/weixin_40740272/article/details/104976063

版权

JavaWeb学习专栏收录该内容

10 篇文章 1 订阅

订阅专栏

使用纯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>

愿所奋斗皆所得

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【JavaScript-练习】删除、替换、克隆元素

使用纯JS完成网页中某个特定标签得删除，替换以及克隆<!DOCTYPE HTML><html> <head> <title>02-删除替换克隆标签.html</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"&g...
复制链接

扫一扫

专栏目录