나는 요소 E를 가지고 있으며 그것에 요소를 추가하고 있습니다. 갑자기 다음 요소가 E의 첫 번째 자식이어야한다는 것을 알게되었습니다. 어떻게해야합니까? E는 배열이 아닌 객체이므로 메서드 unshift가 작동하지 않습니다.

트로프 E의 아이들을 반복하고 키 ++로 옮기는 것이 먼 길이지만, 더 예쁜 방법이 있다고 확신합니다.

var eElement; // some E DOM instance
var newFirstElement; //element which should be first in E

eElement.insertBefore(newFirstElement, eElement.firstChild);

2017 년판

당신이 사용할 수있는

targetElement.insertAdjacentElement('afterbegin', newFirstElement)

에서 MDN :

insertAdjacentElement () 메소드는 호출 된 요소를 기준으로 지정된 위치에 지정된 요소 노드를 삽입합니다.

position
요소와 관련된 위치를 나타내는 DOMString; 다음 문자열 중 하나 여야합니다.
beforebegin: 요소 자체 앞.
afterbegin: 첫 번째 자식 앞에 요소 내부.
beforeend: 마지막 자식 이후 요소 내부.
afterend: 요소 자체 뒤.

element
트리에 삽입 할 요소입니다.

또한 가족 계열 insertAdjacent에는 형제 방법이 있습니다.

element.insertAdjacentHTML('afterbegin','htmlText')innerHTML모든 것을 무시하지 않고 html 문자열을 직접 주입 하므로 압제 적 인 과정을 뛰어 넘고 document.createElement문자열 조작 과정으로 전체 구성 요소를 만들 수도 있습니다

element.insertAdjacentText살균 문자열을 element에 주입하십시오. 더 이상은 없어encode/decode

2018 버전

parentElement.prepend(newFirstChild)

이것은 현대 JS입니다! 이전 옵션보다 더 읽기 쉽습니다. 현재 Chrome, FF 및 Opera에서 사용할 수 있습니다.

추신 : 당신은 직접 문자열을 선행 할 수 있습니다

parentElement.prepend('This text!')

developer.mozilla.org

사용 가능 -2020 년 5 월 94 %

폴리 필

모든 창 HTML 요소에서 직접 구현할 수 있습니다.
이처럼 :

HTMLElement.prototype.appendFirst=function(childNode){
    if(this.firstChild)this.insertBefore(childNode,this.firstChild);
    else this.appendChild(childNode);
};

수락 된 답변은 함수로 리팩토링되었습니다.

function prependChild(parentEle, newFirstChildEle) {
    parentEle.insertBefore(newFirstChildEle, parentEle.firstChild)
}

내가 오해하지 않는 한 :

$("e").prepend("<yourelem>Text</yourelem>");

또는

$("<yourelem>Text</yourelem>").prependTo("e");

설명에서 어떤 조건이 첨부되어있는 것처럼 들리므로

if (SomeCondition){
    $("e").prepend("<yourelem>Text</yourelem>");
}
else{
    $("e").append("<yourelem>Text</yourelem>");
}

jQuery 에서 .prepend 함수를 찾고 있다고 생각합니다 . 예제 코드 :

$("#E").prepend("<p>Code goes here, yo!</p>");

이 프로토 타입을 만들어 요소를 부모 요소 앞에 추가했습니다.

Node.prototype.prependChild = function (child: Node) {
    this.insertBefore(child, this.firstChild);
    return this;
};

var newItem = document.createElement("LI");       // Create a <li> node
var textnode = document.createTextNode("Water");  // Create a text node
newItem.appendChild(textnode);                    // Append the text to <li>

var list = document.getElementById("myList");    // Get the <ul> element to insert a new node
list.insertBefore(newItem, list.childNodes[0]);  // Insert <li> before the first child of <ul>

https://www.w3schools.com/jsref/met_node_insertbefore.asp