一、标签操作

（一）插入标签

方式一：使用原生字符串的形式添加，insertAdjacentHTML，四种方式：

　　　　在列表内的最下面：beforeEnd，

　　　　在列表内的最上面：afterBegin，

　　　　在列表外面上方：beforeBegin，

　　　　在列表外面下方：afterEnd，

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>insertTag</title>
</head>
<body>
    <input type="text">
    <input type="button" value="添加" onclick="Foo(this);">
    <div>
        <ul id="commontList">
            <li>lucy</li>
            <li>dongxuew</li>
        </ul>
    </div>

    <script>
    //插入方式一：原生字符串的形式
        function Foo(ths){
            //取值，将文本框清空还原，
            var valu = ths.previousElementSibling.value;
            ths.previousElementSibling.value = "";
            //插入
            var currentList = document.getElementById("commontList");
            var newContent = "<li>"+valu+"</li>";
            currentList.insertAdjacentHTML("beforeEnd",newContent)    //在列表内的最下面添加
            //currentList.insertAdjacentHTML("afterBegin",newContent)   //在列表内的最上面添加
            //currentList.insertAdjacentHTML("beforeBegin",newContent)  //在列表外面上方添加
            //currentList.insertAdjacentHTML("afterEnd",newContent)     //在列表外面下方添加
        }

    </script>
</body>
</html>
View Code

方式二：直接添加标签元素，推荐使用此方式，可以进行复用，

　　　　创建新标签：createElement

　　　　在节点里最下方添加标签：appendChild，

　　　　在节点中指定位置添加标签：insertBefore,

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>insertTag</title>
</head>
<body>
    <input type="text">
    <input type="button" value="添加" onclick="Foo(this);">
    <div>
        <ul id="commontList">
            <li>lucy</li>
            <li>dongxuew</li>
        </ul>
    </div>

    <script>
    //插入方式二：直接天界标签元素，推荐使用此方法，可以复用，
        function Foo(ths){
            //取值，将文本框清空还原，
            var valu = ths.previousElementSibling.value;
            ths.previousElementSibling.value = "";
            //插入：标签元素
            var tag = document.createElement("li");
            tag.innerText = "huxiao";
            var currentList = document.getElementById("commontList");
            //currentList.appendChild(tag);       //在最后面添加新标签
            currentList.insertBefore(tag,currentList.children[0])   //在指定位置前面添加新标签
            //在新添加的标签中嵌套新标签
            var temp = document.createElement("a");
            temp.innerText = "百度";
            temp.href = "www.baidu.com";
            tag.append(temp);
        }
    </script>
</body>
</html>
View Code

（二）剪切、复制、删除标签

剪切：appendChild

复制：cloneNode（），添加参数true：复制包含内容；不添加参数：仅复制框架，

删除：removeChild

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>fuzhijianqie</title>
</head>
<body>
    <div id="n">
        <div id="d">11.1</div>
        <div>11.2</div>
    </div>
    <div id="h">
        2.1hahaha
        <a>2.2ooo</a>
        <div>2.3no</div>
    </div>

    <script>
        //var hh = document.getElementById("h");
        var nn = document.getElementById("n");
        /*
        //剪切：将nn移动到hh中
        //hh.appendChild(nn)

        //复制:仅复制框架
        //var newH = hh.cloneNode();
        //nn.appendChild(newH);

        //复制:连带框架和内容
        var newH = hh.cloneNode(true);
        nn.appendChild(newH);
        */

        //删除
        var delNode = document.getElementById("d");
        nn.removeChild(delNode);

    </script>
</body>
</html>
View Code

二、返回顶部 

 （一）方式一：CSS #a

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>fanhuidingbu</title>
</head>
<body>
    <div id="topLine" style="height:1000px;"></div>
    <div><a href="#topLine">CSS：#a方式，返回顶部</a></div>
</body>
</html>
View Code

（二）方式二：JS

　　1、鼠标滚动事件触发：onscroll；

　　2、鼠标所在位置高度：scrollTop；

　　3、使用a标签链接时，界面保持当前不刷新跳转：href="#" 或 href=“JavaScript：void（0）”；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>fanhuidingbu</title>
    <style>
        .hide{
            display:none;
        }
        .backTop{
            position:fixed;
            right:0;
            bottom:0;
        }
    </style>
</head>
<body onscroll="Roll();">
    <div id="h1" style="height:1000px;">使用JS实现：返回顶部效果，页面不跳转的方法：#、javascript:void(0)</div>
    <a id="lo" href="javascript:void(0);" class="backTop hide" type="button" onclick="Totop();">返回顶部</a>


    <script>
        //返回顶部的按钮已隐藏，鼠标到达一定位置后再出现，
        function Roll(){
            var saddr = document.body.scrollTop;
            var cnode = document.getElementById("lo");
            if(saddr > 400){
                cnode.classList.remove("hide");
            }else{
                cnode.classList.add("hide");
            };
        };
        //单击返回顶部
        function Totop(){
            document.body.scrollTop = 0;
        };

    </script>
</body>
</html>
View Code