Question

使用此处建议的解决方案：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>吗？

还是使用insertAfter（https://stackoverflow.com/a/8707793/10279127）与jQuery完全兼容？

Answer 1

您可以使用

在div＃div0中进行选择

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

Answer 2

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

let anchor = document.querySelector('#div0 a');
let 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>

javascript创建div并将其附加到不带id的子元素旁边

2 个答案: