자바 펼쳐 추가 세부 사항 AFTER 요소

자바 펼쳐 추가 세부 사항 AFTER 요소

---

이 질문에 이미 답변이 있습니다.

• 라이브러리를 사용하지 않고 JavaScript에서 다른 요소를 삽입하는 방법은 무엇입니까? 17 답변

javascript를 사용하여 ul 요소 안에 다른 li 요소를 추가하고 싶습니다. 이것은 지금까지 가지고있는 코드입니다.

var parentGuest = document.getElementById("one");
var childGuest = document.createElement("li");
childGuest.id = "two";

appendChild에 익숙합니다.

parentGuest.appendChild(childGuest);

그러나 추가하지 않고 추가합니다. 새 요소를 추가해야 할 필요가 있습니까? 감사합니다.

<ul>
  <li id="one"><!-- where the new li is being put --></li>
  <!-- where I want the new li -->
</ul>

---

당신이 사용할 수있는 :

if (parentGuest.nextSibling) {
  parentGuest.parentNode.insertBefore(childGuest, parentGuest.nextSibling);
}
else {
  parentGuest.parentNode.appendChild(childGuest);
}

---

그러나 Pavel이 지적했듯이 referenceElement 는 null / 정의되지 않습니다. insertBefore 는 appendChild 처럼 동작 합니다. 따라서 다음은 위와 동일합니다.

parentGuest.parentNode.insertBefore(childGuest, parentGuest.nextSibling);

---

요소의 다음 형제 이전에 기존 요소의 부모에 새 요소를 추가합니다. 처럼 :

var parentGuest = document.getElementById("one");
var childGuest = document.createElement("li");
childGuest.id = "two";
parentGuest.parentNode.insertBefore(childGuest, parentGuest.nextSibling);

또는 추가 다음을 수행하십시오.

var parentGuest = document.getElementById("one"); 
var childGuest = document.createElement("li"); 
childGuest.id = "two"; 
parentGuest.parentNode.appendChild(childGuest);

---

당신이 일반 JS 솔루션을 찾고 있다면, 당신은 단지 사용 insertBefore()에 대해 알고 nextSibling있습니다.

다음과 같은 것 :

parentGuest.parentNode.insertBefore(childGuest, parentGuest.nextSibling);

기본값의 nextSibling은 null이므로 특별한 작업을 수행 할 필요가 없습니다.

: 다음 형제가 업데이트를 반환 하고 의미 : 끝에 추가합니다. 의 두 번째 인수에 전달 하기 때문에 현재 허용되는 대답과 같이 if존재 여부를 확인할 필요 조차 parentGuest.nextSibling없습니다 .nullnullinsertBefore()

참고 :

• nextSibling
• insertBefore

.

jQuery를 사용하는 경우 (그렇지 필터링하고 위에서 일반 JS 답변을 사용했습니다) 편리한 after()방법을 사용할 수 있습니다 .

$("#one").after("<li id='two'>");

참고 :

• () 이후 jQuery

---

이것으로 충분합니다.

 parentGuest.parentNode.insertBefore(childGuest, parentGuest.nextSibling || null);

경우 생성 이후 refnode(제 파라미터) 널 정규에 appendChild 행한다. 여기를 참조하십시오 : http://reference.sitepoint.com/javascript/Node/insertBefore

실제로 나는 || null그것이 필요한지 의심스럽고 , 그것을 시도하고 봅니다.

---

당신은 또한 할 수 있습니다

function insertAfter(node1, node2) {
    node1.outerHTML += node2.outerHTML;
}

또는

function insertAfter2(node1, node2) {
    var wrap = document.createElement("div");
    wrap.appendChild(node2.cloneNode(true));
    var node2Html = wrap.innerHTML;
    node1.insertAdjacentHTML('afterend', node2Html);
}

---

이후는 이제 JavaScript 메소드입니다.

MDN 문서

MDN 인용

이 ChildNode.after()메서드 DOMString는 this ChildNode바로 뒤에이 부모 의 자식 목록 에 Node 또는 개체 집합을 삽입합니다 ChildNode. DOMString 객체는 동등한 텍스트 노드로 삽입됩니다.

브라우저 지원은 Chrome (54+), Firefox (49+) 및 Opera (39+)입니다. IE와 Edge는 지원하지 않습니다.

단편

var elm=document.getElementById('div1');
var elm1 = document.createElement('p');
var elm2 = elm1.cloneNode();
elm.append(elm1,elm2);

//added 2 paragraphs
elm1.after("This is sample text");
//added a text content
elm1.after(document.createElement("span"));
//added an element
console.log(elm.innerHTML);

<div id="div1"></div>

스 니펫에서 나는 또 다른 용어 사용 APPEND를 너무

참고 URL : https://stackoverflow.com/questions/7258185/javascript-append-child-after-element