자바 펼쳐 추가 세부 사항 AFTER 요소
이 질문에 이미 답변이 있습니다.
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
없습니다 .null
null
insertBefore()
참고 :
.
jQuery를 사용하는 경우 (그렇지 필터링하고 위에서 일반 JS 답변을 사용했습니다) 편리한 after()
방법을 사용할 수 있습니다 .
$("#one").after("<li id='two'>");
참고 :
이것으로 충분합니다.
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 인용
이
ChildNode.after()
메서드DOMString
는 thisChildNode
바로 뒤에이 부모 의 자식 목록 에 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
'ProgramingTip' 카테고리의 다른 글
Python, 목록을 고정 크기로 강제 (0) | 2020.11.20 |
---|---|
CSS 클래스를 사용하여 td 요소 내부에 div를 정렬하는 방법 (0) | 2020.11.20 |
이 장고 정규식은 무엇을 의미합니까? (0) | 2020.11.20 |
Django csrf 토큰 + Angularjs (0) | 2020.11.19 |
pandas 데이터 프레임 그룹 별 datetime 월 (0) | 2020.11.19 |