首页js中insertbefore的用法

js中insertbefore的用法

时间: 2024-03-22 10:39:56 浏览: 110

`insertBefore()` 方法用于将一个节点插入到另一个节点的指定位置。它的语法如下： ```javascript parentElement.insertBefore(newNode, referenceNode) ``` 其中，`parentElement` 是要插入新节点的父元素节点，`newNode` 是要插入的新节点，`referenceNode` 是参考节点，即新节点将插入到该节点之前。如果 `referenceNode` 为 `null`，则 `newNode` 将被插入到 `parentElement` 的末尾。下面是一个使用 `insertBefore()` 方法的示例，将一个新的段落元素插入到已有的 HTML 文档中： ```html <!DOCTYPE html> <html> <body> <h2>JavaScript insertBefore() Method</h2> <p id="myP">This is a paragraph.</p> <button onclick="myFunction()">Try it</button> <script> function myFunction() { var para = document.createElement("P"); var t = document.createTextNode("This is a new paragraph."); para.appendChild(t); document.body.insertBefore(para, document.getElementById("myP")); } </script> </body> </html> ``` 上述代码中，我们使用 `createElement()` 方法创建一个新的 `<p>` 元素，并使用 `createTextNode()` 方法创建一个文本节点，然后将文本节点添加到新元素中。最后，我们使用 `insertBefore()` 方法将新元素插入到已有的 HTML 文档中。

阅读全文