javascript 创建 div 并将其附加到没有 id 的子元素旁边答案

【问题标题】：javascript create div and append it next to a child element without idjavascript 创建 div 并将其附加到没有 id 的子元素旁边
【发布时间】：2019-02-04 15:01:16
【问题描述】：

使用此处建议的解决方案：https://stackoverflow.com/a/32135318/10279127 我正在尝试创建一个新 div，并将其附加到带有 id 的父 div 中，紧挨着子 <a> html 元素。

html:

<div id="div0">
<a href="#" class="link">anchor text</a>
// I'd like to place the new div here
</div>

js:

Element.prototype.appendAfter = function(element) {
  element.parentNode.insertBefore(this, element.nextSibling);
}, false;

var NewElement = document.createElement('div');
NewElement.id = 'newDivID';
var tToAfter = $('#div' + index + ' > a'); // this is what i tried but doesn't work
NewElement.appendAfter(tToAfter);

如果在.appendAfter(...) 内部而不是tToAfter 我写document.getElementById('randomElementId') 它可以工作并附加它，所以我认为必须是纯javascript，js 中有没有办法做类似的事情：document.getElementById('div' + index).firstChild 获取<a> ?

或者完全使用 jQuery 使用 insertAfter (https://stackoverflow.com/a/8707793/10279127) ？

【问题讨论】：

有一些问题要问你：<a> 会永远是第一个div 孩子吗？ a标签和附加标签之间的div内会是其他元素吗？
我明白你的意思，事实上获得第一个孩子并不是最好的，因为现在它总是第一个孩子，但如果将来发生变化，代码就会中断。
所以规则是：总是在第一个<a>tag 之后追加？

标签： javascript append parent-child

【解决方案1】：

您可以使用insertAdjacentElement 简化您的方法。例如（css 是无关紧要的 - 就在那里，因此您可以直观地看到插入的 div）：

const anchor = document.querySelector('#div0 a');
const elem = document.createElement('div');
elem.id = 'newDivID';
anchor.insertAdjacentElement('afterend', elem);

div:not(#div0) {
  height: 20px;
  background-color: green;
}

<div id="div0">
  <a href="#" class="link">anchor text</a>
  // I'd like to place the new div here
</div>

【讨论】：

【解决方案2】：

您可以使用

在 div#div0 内进行选择

const anchor = document.querySelector("#div0>a");

【讨论】：