HTML - DOM 元素 insertBefore() 方法

insertBefore() 方法允許您在父元素內新增新的子元素，並指定其相對於另一個子元素的位置。

語法

parentElement.insertBefore(newElement, referenceElement);

引數

引數	描述
newElement	要插入到 parentElement 中的元素。
referenceElement	將在其之前插入 newElement 的元素。

返回值

此方法不返回任何值 (undefined)。

HTML DOM 元素 'insertBefore()' 方法示例

以下是一些 insertBefore() 方法指定不同元素插入位置的示例。

在現有元素之前插入

此示例演示如何使用 insertBefore() 方法在現有具有 id 為 "child3" 的<p> 元素之前插入 'newElement'。

<!DOCTYPE html>
<html lang="en">
<head> 
    <title>insertBefore Example</title>
</head>

<body>
    <h1>HTML DOM Element</h1>
    <h2>insertBefore() Method</h2>

    <div id="parent">
    <p id="child1">First Child</p>
    <p id="child3">Third Child</p>
    </div>

    <script>
        var parentElement = document.getElementById("parent");
        var newElement = document.createElement("p");
        newElement.textContent = "Second Child (Inserted)";
        newElement.style.color = "blue";  
        var referenceElement=document.getElementById("child3");
        
        parentElement.insertBefore
        (newElement, referenceElement);
    </script>
</body>

</html>

如果引用元素為空則追加

在此示例中，insertBefore() 方法使用 'null' 作為引用元素，這會將 'newItem' 追加到<ul> 列表的末尾。

<!DOCTYPE html>
<html lang="en">
<head> 
    <title>insertBefore</title>
</head>

<body>
    <h1>HTML DOM Element</h1>
    <h2>insertBefore() Method</h2>
    <p>click the button to insert the new Item...</p>

    <ul id="myList">
        <li>Apple</li>
        <li>Banana</li>
        <li>Orange</li>
    </ul>

    <button onclick="addItem()">
        Add Item
    </button>

    <script>
        function addItem() {
            var myList = document.getElementById("myList");
            var newItem = document.createElement("li");
            newItem.textContent = "Grapes";
            // Reference element is null,will added to end
            myList.insertBefore(newItem, null);
        }
    </script>
</body>

</html>

動態新增書籍列表

此示例演示如何使用 insertBefore() 方法動態地將專案（書籍）新增到列表中。它使用 firstChild 作為參考，並演示如何將元素插入到特定位置。

<!DOCTYPE html>
<html lang="en">
<head> 
    <title>Insert Before</title>
</head>

<body>
    <h1>HTML DOM Element</h1>
    <h2>insertBefore() Method</h2>
    <p>click the button to add your Fav Book...</p>
    <h1>Favorite Books</h1>

    <ol id="bookList">
        <li>The Great Gatsby</li>
        <li>To Kill a Mockingbird</li>
    </ol>
    <button onclick="addBook()">
        Add Book
    </button>

    <script>
        function addBook() {
            var bookList = document.getElementById("bookList");
            var newBook = document.createElement("li");
            var bookTitle = prompt("Enter new book title:");
            newBook.textContent = bookTitle || "New Book";

            // Reference element is the first child, 
            // new book will be added at the beginning
            var referenceElement = bookList.firstChild;
            bookList.insertBefore(newBook, referenceElement);
        }
    </script>    
</body>

</html>

支援的瀏覽器

方法
insertBefore()	是	是	是	是	是

html_dom_element_reference.htm

列印頁面