HTML DOM insertBefore 方法

2018-12-02 14:45 更新

HTML DOM insertBefore() 方法

元素對(duì)象參考手冊(cè) 元素對(duì)象

實(shí)例

列表中添加項(xiàng):

document.getElementById("myList").insertBefore(newItem,existingItem);

添加前:

  • Coffee
  • Tea

添加后:

  • Water
  • Coffee
  • Tea

嘗試一下 ?

定義和用法

insertBefore() 方法可在已有的子節(jié)點(diǎn)前插入一個(gè)新的子節(jié)點(diǎn)。

提示： 如果你想創(chuàng)建一個(gè)新的文本列表項(xiàng)，在 LI 元素后你應(yīng)該添加元素的文本節(jié)點(diǎn)，然后在列表中添加 LI元素。

你也可以使用 insertBefore 方法來(lái) 插入/移除 已存在的元素。

實(shí)例

移動(dòng)某個(gè)列表項(xiàng)到另一個(gè)列表項(xiàng)：

var node=document.getElementById("myList2").lastChild;
var list=document.getElementById("myList1");
list.insertBefore(node,list.childNodes[0]);

添加前:

  • CoffeeTea
  • Water
  • Milk

添加后:

  • Milk
  • Coffee
  • Tea
  • Water

嘗試一下 ?

Internet ExplorerFirefoxOperaGoogle ChromeSafari

所有主要瀏覽器都支持 insertBefore() 方法

語(yǔ)法

node.insertBefore(newnode,existingnode)

參數(shù)

參數(shù) 類(lèi)型 描述
newnode Node object Required. The node object you want to insert
existingnode 節(jié)點(diǎn)對(duì)象 必須。要添加新的節(jié)點(diǎn)前的子節(jié)點(diǎn)。

返回值

類(lèi)型 描述
節(jié)點(diǎn)對(duì)象 The node you inserted

技術(shù)細(xì)節(jié)

DOM 版本 Core Level 1 Node Object

元素對(duì)象參考手冊(cè) 元素對(duì)象


以上內(nèi)容是否對(duì)您有幫助：
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)