js怎麼把動態追加的元素放在元素最後一個子節點上面,js中怎麼實現動態添加元素

本文目錄一覽：

• 1、js追加元素的幾種方法
• 2、怎麼用js在某個元素節點中添加元素
• 3、如何用js在頁面中添加元素？

js追加元素的幾種方法

append() 方法在被選元素的結尾（在內部）插入指定內容。

如$(“p”).append(” bHello world!/b”);

appendTo() 方法在被選元素的結尾（在內部）插入指定內容。

如：$(“bHello World!/b”).appendTo(“p”);

prepend() 方法在被選元素的開頭插入內容。

如：$(“p”).prepend(“Some prepended text.”);

after() 方法在被選元素之後插入內容。

before() 方法在被選元素之前插入內容。

如$(“img”).after(“Some text after”);$(“img”).before(“Some text before”);

怎麼用js在某個元素節點中添加元素

第一種

function insertEle() { var oTest = document.getElementById(“box-one”); var newNode = document.createElement(“div”); var reforeNode = document.getElementById(“p1″); newNode.innerHTML = ” This is a newcon “; oTest.insertBefore(newNode,reforeNode.nextSibling);//新建的元素節點插入id為P1節點元素的後面。 }

第二種// 自定義函數向後插入function insertAfter( newElement, targetElement){ var parent = targetElement.parentNode; if ( parent.lastChild == targetElement ) { // 如果最後的節點是目標元素，則直接添加。因為默認是最後 parent.a( newElement ); } else { //如果不是，則插入在目標元素的下一個兄弟節點的前面。也就是目標元素的後面 parent.insertBefore( newElement, targetElement.nextSibling ); }}

如何用js在頁面中添加元素？

1.首先創建html結構，如下圖所示，一個input元素，一個按鈕，一個空的ul列表。

2.然後添加按鈕點擊事件，如下圖所示，在按鈕點擊事件中獲得input元素。

3.通過value屬性我們可以獲得用戶在input中輸入的內容，如下圖所示。

4.下面我們來動態創建一個li元素，如下圖所示，運用document中的createElement方法即可。

5.創建好li元素以後，下面要做的就是給其設置innerHTML內容，如下圖所示。

6.接下來就是獲取ul元素了，如下圖所示，仍然用getElementById方法。

7.最後通過調用appendChild方法將創建的li元素添加到ul列表中，如下圖所示。