JavaScript insertAfter

Posted in :

之前有學會, 怎麼互換 2個 div 的位置, 使用的原理是 insertBefore(), 實際在使用時, 卻沒有 insertAfter 可以使用, 替代解法是:
https://www.javascripttutorial.net/javascript-dom/javascript-insertafter/

The following insertAfter() function illustrates the logic:

function insertAfter(newNode, existingNode) {
    existingNode.parentNode.insertBefore(newNode, existingNode.nextSibling);
}Code language: JavaScript (javascript)

Suppose that you have the following list of items:

<ul id="menu">
    <li>Home</li>   
    <li>About</li>
    <li>Contact</li>
</ul>Code language: HTML, XML (xml)

The following inserts a new node after the last list item:

let menu = document.getElementById('menu');
// create a new li node
let li = document.createElement('li');
li.textContent = 'Services';

// insert a new node after the last list item
insertAfter(li,  menu.lastElementChild);

使用前, 可能需要先檢查一下, 是不是有 nextSibling

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *