交换两个元素在节点中的位置（阿里面试题）

相关知识

• insertBefore方法

parentNode. insertBefore(newNode,referenceNode)

1. 将newNode插在referenceNode前面
2. parentNode指的是referenceNode的父节点
3. 返回值为newNode
4. referenceNode 为 null 则 newNode 将被插入到子节点的末尾

• replaceChild方法

parentNode.replaceChild(newChlid,oldChild)
1.新节点替换旧节点，如果新节点在dom中已经存在，会从原来的位置删除
2. parentNode指的是oldChild的父节点
3.返回值为oldChild

题目

如果想要交换h3标签和第二个li标签

 <div class="box">
        <h3 class="title">我是标题标签</h3>
    </div>
    <ul class="list">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>

思路：可以使用replaceChild方法将h3标签插在li2的前面，但是2怎么插在h3标签的位置呢，需要生成一个新元素提前插在h3标签的位置

function changeofPosition1(obj1,obj2){
            var newNode=document.createElement("li");
            obj1.parentNode.insertBefore(newNode,obj1);
            var li=obj2.parentNode.replaceChild(obj1,obj2);//两个的顺序就看要返回的是什么
            newNode.parentNode.replaceChild(obj2,newNode);
        }
        var list=document.querySelector(".list");
        var obj1=list.children[1];
        // var obj2=list.children[3];
        var obj2=document.querySelector(".title");
        changeofPosition1(obj1,obj2);

在代码中特别要注意是谁的父节点，注意insertBefore和replaceChil的用法，父节点都是指后面参数的