在纯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后

回答

相关问题