将DOM元素添加到父元素的开头

Question

我有以下javascript工作将AJAX响应插入ID为results的div：

document.getElementById("results").innerHTML=xmlhttp.responseText;

但是，这会在已经存在的元素之后添加所有新元素。我需要在其他所有元素之前插入新元素。

我知道这可能非常微不足道但我似乎无法自己找到这样做。

感谢您的帮助！

Answer 1

我不记得确切的语法，但它类似于：

var newDiv = document.createElement("div");
newDiv.innerHTML=xmlhttp.responseText;
document.getElementById("results").childNodes.addAt(0,newDiv);

如果你可以使用jQuery，那就简单了：

$("#results").prepend(xmlhttp.responseText);

Answer 2

你想要这个

results.insertAdjacentHTML( 'beforebegin', xmlhttp.responseText );

或者

results.insertAdjacentHTML( 'afterbegin', xmlhttp.responseText );

（变量results当然是对DOM元素的引用）

因此，第一个将在元素本身之前插入新内容（作为前一个兄弟），第二个将在内部内插入元素之前其他孩子）。

Answer 3

使用现代js，您可以使用prepend method。目前caniuse.com says only of IE, Edge, and OperaMini are not supported。

ParentNode.prepend(nodesToPrepend);

例如，

ParentNode.prepend(newDiv);

此外，它会自动将文本转换为文本节点，因此您可以针对您的用例执行以下操作：

document.getElementById("results").prepend(xmlhttp.responseText);