解決原生javascript 缺乏insertAfter的功能，非Jquery方法

時間 2019-12-10

標籤解決原生 javascript 缺乏 insertafter 功能 jquery 方法欄目 JavaScript 简体版

原文原文鏈接

在現有的方法後插入一個新元素，你可能會想：既然有insertBefore方法，是否是也有一個相應的insertAfter()方法。很惋惜，DOM沒有提供方法。
下面編寫insertAfter函數，雖然DOM自己沒有提供，但它確實提供了一個把一個節點插入到另外一個節點以後全部工具。咱們徹底能夠利用已有的DOM方法和屬性編寫一個insertAfter函數：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

在現有的方法後插入一個新元素，你可能會想：既然有insertBefore方法，是否是也有一個相應的insertAfter()方法。很惋惜，DOM沒有提供方法。
下面編寫insertAfter函數，雖然DOM自己沒有提供，但它確實提供了一個把一個節點插入到另外一個節點以後全部工具。咱們徹底能夠利用已有的DOM方法和屬性編寫一個insertAfter函數：
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>
<script>
    function insertAfter(newElement,targetElement){
        var parent = targetElement.parentNode;
        if(parent.lastChild == targetElement){
            parent.appendChild(newElement);
        }else{
            parent.insertBefore(newElement,targetElement.nextSibling);
        }
    }
    var p = document.createElement('p');
    var txt = document.createTextNode('我是新插入的節點');
    p.appendChild(txt);


    var lis = document.getElementsByTagName('li');

    //insertAfter(p,lis[0])
</script>
</body>
</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。