JavaScript——DOM属性之innerHTML和insertBefore

最新推荐文章于 2024-08-25 15:00:00 发布

原创最新推荐文章于 2024-08-25 15:00:00 发布

· 1k 阅读

6 ·

版权

文章标签：

#javascript #开发语言 #学习 #前端

今天我们来看看DOM当中的innerHTML和insertBefore。今天是用的样例仍然与上次一样，样例代码如下：

<body>
    <p>喜欢的城市</p>
    <ul id="city">
        <li id="bj" name="beijing">北京</li>
        <li>上海</li>
        <li>广州</li>
        <li>深圳</li>
    </ul>
    <p>喜欢的语言</p>
    <ul id="language">
        <li id="js">javascript</li>
        <li>python</li>
        <li>c++</li>
        <li>java</li>
</body>

基本概念

innerHTML

innerHTML属性用于获取或设置元素的HTML内容。

如果想要获取某个元素内部的HTML结构时，可以使用 innerHTML 属性。这会返回该元素内部的HTML字符串，包括所有的子元素和它们的HTML内容。

同样地，你也可以使用 innerHTML 属性来设置某个元素内部的HTML内容。当你这样做时，原有的子元素会被新的HTML内容替换。

insertBefore

insertBefore允许将一个节点（newNode）插入到父节点（parentNode）中的指定子节点（referenceNode）之前。如果referenceNode是parentNode的第一个子节点，那么newNode将被插入为parentNode的第一个子节点。如果referenceNode是null，或者不是一个子节点，那么newNode将被添加到parentNode的子节点列表的末尾。

使用

innerHTML

获取内部的HTML结构

如果我们想要使用innerHTML，我们只需要直接使用“点”记性调用即可，代码和效果如下：

<script type = "text/javascript">
    window.onload = function(){
        var citynode = document.getElementById("city");
        alert(citynode.innerHTML);
    }
</script>

此时我们就获得了元素内部的HTML结构。

交换内部元素

如果我们想要交换两个内部的html元素，我们可以使用一个中间变量来完成：

<script type = "text/javascript">
    window.onload = function(){
        var citynode = document.getElementById("city");
        //呼唤city和lánguage节点的内容
        var tempNode = citynode.innerHTML;
        var languageNode = document.getElementById("language");
        citynode.innerHTML = languageNode.innerHTML;
        languageNode.innerHTML = tempNode;
    }
</script>

InsertBefore

基本使用-插入到前面

该方法除了插入，还有移动节点的功能，具体代码示例和效果示意如下：

<script type = "text/javascript">
    window.onload = function(){
        var cityNode = document.getElementById("city");
        var bjNode = document.getElementById("bj");
        var rlNode = document.getElementById("js");
        cityNode.insertBefore(rlNode, bjNode);
    }
</script>

插入到后面

如果我想要向后插入，我们需要使用进行判断，当父节点存在时则进行追加，如果父节点不存在就进行向前插入。

<script type = "text/javascript">
    window.onload = function(){
        var city = document.getElementById("city");
        var bjNode = document.getElementById("bj");
        var jsNode = document.getElementById("js");
        var refNode = document.getElementById("sh");
        insertAfter(jsNode,refNode);
    }
    function insertAfter(newNode, refNode){
        var parentNode = refNode.parentNode;
        if(parentNode){
            var lastNode = parentNode.lastChild
            if(refNode == lastNode){
                parentNode.appendChild(newNode);
            }
            else{
                var nextNode = refNode.nextsibling;
                parentNode.insertBefore(newNode,nextNode)
            }
        }
    }
</script>