DOM 요소를 첫 번째 자식으로 설정하는 방법은 무엇입니까?

DOM 요소를 첫 번째 자식으로 설정하는 방법은 무엇입니까?

---

나는 요소 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

사용 가능

-2019 년 7 월 91 %

폴리 필

---

모든 창 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

참고 URL :

https://stackoverflow.com/questions/2007357/how-to-set-dom-element-as-the-first-child