JS 实现 div || 标签 位置对调

  • 拿来即食 -- 同级标签位置互换
<!DOCTYPE html><html><head><meta charset=’utf-8‘></head><body>
<h1 id='t1'>Switch Tag Place !</h1>
<h2 id='t2'>Aswl !</h2>
<ul id='ul'>
    <li id='A'>A</li>
    <li id='B'>B</li>
    <li id='C'>C</li>
    <li id='D'>D</li>
    <li id='E'>E</li>
<ul>
</body></html>
<script>
function sp(x,y) {
        p = x.parentNode;
        Y = y.nextElementSibling;
        p.insertBefore(y,x);
        Y==x ? p.insertBefore(x,y) : p.insertBefore(x,Y);
    }   //useage: sp(A,D);
</script>
  • 不同级的标签位置互换 
function SP(x,y) {
        Xp = x.parentNode;
        Yp = y.parentNode;
        Y = y.nextElementSibling;
        Xp.insertBefore(y,x);
        Y==x ? Yp.insertBefore(x,y) : Yp.insertBefore(x,Y);
    };
一些浏览器支持直接使用id来代替document.getElementById();
使用到的原生函数:插入到前面/后面,获取下一个/上一个标签,
可以使用兼容性更好的insertAdjacentElement代替insertbefore,但是nextElementSibling出现null要另外解决
无非就是保存替换一个之前它的nextElementSibling作为参照物;
如果使用知道一个中间的参照物或是不考虑兼容性甚至可以使用原生提供的实验性函数after()和before(),不要用封装函数直接实现其实也很简单;

测试工具 , JS原生函数兼容性查询Mozilla学习文档

猜你喜欢

转载自www.cnblogs.com/tacty/p/12300221.html