在純JS中插入firstchild div後

我使用純JS在getElementById找到的div後附加HTML字符串。這工作正常，但我現在想追加找到的元素的第一個孩子。在純JS中插入firstchild div後

HTML

第一個div 事業部我要附加到其他分區...

（第二和第三的div沒有ID或類）

function insertAfter(referenceNode, newNode) { 
    referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling); 
} 

var element1 = document.createElement("div"); 
element1.innerHTML = 'Text to append'; 
var div1 = document.getElementById('first-div'); 
insertAfter(div1, element1);

目前的結果是：

第一個div 事業部我要附加到其他分區... 文本追加

我試圖做到這一點：

第一分區分區我想追加到要追加的文字個其他分區...

我已經試過

var div1 = document.getElementById('first-div').firstchild;

，但是這是不工作

來源

2017-10-15 redditor

這可能是一個錯字，但從你給出的例子來說，你想追加的div不是第一個div的孩子，而是一個兄弟姐妹... –

@MichaelBeeson你說得很對，這是一個錯字。我將編輯該問題。 – redditor

正如我在我的評論說，你的例子表明要追加到div不孩子，而是「第一格」的兄弟姐妹。它應該看起來像

<div id="first-child"> 
    <div>Div I want to append to</div> 
</div>

然後父div的第一個孩子可以

var div2 = div1.children[0];

我與你撥弄撥弄發現：

http://jsfiddle.net/01qrmj36/

來源

2017-10-15 17:50:50

如果您刪除referenceNode從insertBefore在您的insertAfter示例中調用它應該表現爲您想要的方式，例如：

function insertAfter(referenceNode, newNode) { 
    referenceNode.parentNode.insertBefore(newNode); 
} 

var element1 = document.createElement("div"); 
element1.innerHTML = 'Text to append'; 
var div1 = document.getElementById('first-div'); 
insertAfter(div1, element1);

省略insertBefore中的referenceNode，默認將新節點插入子節點列表的末尾，請參閱更多here。

來源

2017-10-15 18:04:39 SlothRocket

在純JS中插入firstchild div後

回答

相關問題