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

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

---

거기에 insertBefore()자바 스크립트,하지만 내가 어떻게 요소를 삽입 할 수 있습니다 후 jQuery를 또는 다른 라이브러리를 사용하지 않고 다른 요소를?

---

referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);

뒤에 referenceNode넣을 노드는 어디에 있습니까 newNode? 이 referenceNode부모 요소 내의 마지막 자식 이면 괜찮습니다 . 목록 끝에 추가하여 해당 사례를 처리 하고 처리 하기 때문 referenceNode.nextSibling입니다 .nullinsertBefore

그래서:

function insertAfter(newNode, referenceNode) {
    referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
}

여기에서 시도하십시오.

---

간단한 JavaScript는 다음과 같습니다.

앞에 추가 :

element.parentNode.insertBefore(newElement, element);

뒤에 추가 :

element.parentNode.insertBefore(newElement, element.nextSibling);

---

그러나 사용의 편의를 위해 거기에 일부 프로토 타입을 던져

다음 프로토 타입을 빌드하면 새로 생성 된 요소에서 이러한 함수를 직접 호출 할 수 있습니다.

• newElement.appendBefore(element);

• newElement.appendAfter(element);

.appendBefore (element) 프로토 타입

Element.prototype.appendBefore = function (element) {
  element.parentNode.insertBefore(this, element);
},false;

.appendAfter (element) 프로토 타입

Element.prototype.appendAfter = function (element) {
  element.parentNode.insertBefore(this, element.nextSibling);
},false;

---

그리고 모든 것이 실제로 작동하는지 보려면 다음 코드 스 니펫을 실행하십시오.

/* Adds Element BEFORE NeighborElement */
Element.prototype.appendBefore = function(element) {
  element.parentNode.insertBefore(this, element);
}, false;

/* Adds Element AFTER NeighborElement */
Element.prototype.appendAfter = function(element) {
  element.parentNode.insertBefore(this, element.nextSibling);
}, false;


/* Typical Creation and Setup A New Orphaned Element Object */
var NewElement = document.createElement('div');
NewElement.innerHTML = 'New Element';
NewElement.id = 'NewElement';


/* Add NewElement BEFORE -OR- AFTER Using the Aforementioned Prototypes */
NewElement.appendAfter(document.getElementById('Neighbor2'));

div {
  text-align: center;
}
#Neighborhood {
  color: brown;
}
#NewElement {
  color: green;
}

<div id="Neighborhood">
  <div id="Neighbor1">Neighbor 1</div>
  <div id="Neighbor2">Neighbor 2</div>
  <div id="Neighbor3">Neighbor 3</div>
</div>

JSFiddle에서 실행

---

insertAdjacentHTML + outerHTML

elementBefore.insertAdjacentHTML('afterEnd', elementAfter.outerHTML)

장점 :

• DRYer : 변수에 before 노드를 저장하고 두 번 사용할 필요가 없습니다. 변수의 이름을 바꾸면 수정해야 할 일이 적습니다.
• 골프를 친다 더보다 insertBefore(손익분기 기존 노드 변수 이름은 길이 3 개 문자 인 경우)

단점 :

• 최신 이후 낮은 브라우저 지원 : https://caniuse.com/#feat=insert-adjacent
• outerHTML요소를 문자열로 변환 하기 때문에 이벤트와 같은 요소의 속성이 손실됩니다 . insertAdjacentHTML요소가 아닌 문자열에서 콘텐츠를 추가 하기 때문에 필요합니다 .

---

빠른 Google 검색은 이 스크립트를 보여줍니다

// create function, it expects 2 values.
function insertAfter(newElement,targetElement) {
    // target is what you want it to go after. Look for this elements parent.
    var parent = targetElement.parentNode;

    // if the parents lastchild is the targetElement...
    if (parent.lastChild == targetElement) {
        // add the newElement after the target element.
        parent.appendChild(newElement);
    } else {
        // else the target has siblings, insert the new element between the target and it's next sibling.
        parent.insertBefore(newElement, targetElement.nextSibling);
    }
}

---

하지만 insertBefore()(참조 MDN은 ) 여기에 대부분의 답변에 의한 크고 참조입니다. 유연성을 높이고 좀 더 명확하게하려면 다음을 사용할 수 있습니다.

insertAdjacentElement()( MDN 참조 ) 이렇게하면 모든 요소를 ​​참조하고 원하는 위치에 정확히 이동할 요소를 삽입 할 수 있습니다.

<!-- refElem.insertAdjacentElement('beforebegin', moveMeElem); -->
<p id="refElem">
    <!-- refElem.insertAdjacentElement('afterbegin', moveMeElem); -->
    ... content ...
    <!-- refElem.insertAdjacentElement('beforeend', moveMeElem); -->
</p>
<!-- refElem.insertAdjacentElement('afterend', moveMeElem); -->

유사한 사용 사례에 대해 고려해야 할 기타 사항 : insertAdjacentHTML()및insertAdjacentText()

참조 :

https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentElement https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentHTML https : // developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentText

---

node1.after(node2)생성 <node1/><node2/>,

여기서 node1과 node2는 DOM 노드입니다.

.after()이전 브라우저 [1] 에서는 지원되지 않으므로 폴리 필을 적용해야 할 수 있습니다.

참조 : https://developer.mozilla.org/en-US/docs/Web/API/ChildNode/after

---

또는 간단히 다음을 수행 할 수 있습니다.

referenceNode.parentNode.insertBefore( newNode, referenceNode )
referenceNode.parentNode.insertBefore( referenceNode, newNode )

---

1 단계. 요소 준비 :

var element = document.getElementById('ElementToAppendAfter');
var newElement = document.createElement('div');
var elementParent = element.parentNode;

2 단계. 다음에 추가 :

elementParent.insertBefore(newElement, element.nextSibling);

---

insertBefore () 메서드는 parentNode.insertBefore(). 따라서 이것을 모방하고 메서드를 만들기 위해 parentNode.insertAfter()다음 코드를 작성할 수 있습니다.

자바 스크립트

Node.prototype.insertAfter = function(newNode, referenceNode) {
    return referenceNode.parentNode.insertBefore(
        newNode, referenceNode.nextSibling); // based on karim79's solution
};

// getting required handles
var refElem = document.getElementById("pTwo");
var parent = refElem.parentNode;

// creating <p>paragraph three</p>
var txt = document.createTextNode("paragraph three");
var paragraph = document.createElement("p");
paragraph.appendChild(txt);

// now we can call it the same way as insertBefore()
parent.insertAfter(paragraph, refElem);

HTML

<div id="divOne">
    <p id="pOne">paragraph one</p>
    <p id="pTwo">paragraph two</p>
</div>

DOM을 확장하는 것은 이 기사에 명시된대로 귀하에게 적합한 솔루션이 아닐 수 있습니다 .

Hovewer,이 기사는 2010 년에 작성되었으며 지금은 상황이 다를 수 있습니다. 그러니 스스로 결정하십시오.

JavaScript DOM insertAfter () 메서드 @ jsfiddle.net

---

이상적으로 insertAfter는 insertBefore 와 유사하게 작동해야합니다 . 아래 코드는 다음을 수행합니다.

• 자식이 없으면 새 항목 Node이 추가됩니다.
• 참조가 없으면 Node새 항목 Node이 추가됩니다.
• Node참조 뒤에 없는 경우 Node새 항목 Node이 추가됩니다.
• 참조 Node에 형제가 있으면 Node해당 형제 앞에 새 참조 가 삽입됩니다.
• 새로운 반환 Node

확장 Node

Node.prototype.insertAfter = function(node, referenceNode) {

    if (node)
        this.insertBefore(node, referenceNode && referenceNode.nextSibling);

    return node;
};

일반적인 예

node.parentNode.insertAfter(newNode, node);

실행중인 코드보기

// First extend
Node.prototype.insertAfter = function(node, referenceNode) {
    
    if (node)
        this.insertBefore(node, referenceNode && referenceNode.nextSibling);

    return node;
};

var referenceNode,
    newNode;

newNode = document.createElement('li')
newNode.innerText = 'First new item';
newNode.style.color = '#FF0000';

document.getElementById('no-children').insertAfter(newNode);

newNode = document.createElement('li');
newNode.innerText = 'Second new item';
newNode.style.color = '#FF0000';

document.getElementById('no-reference-node').insertAfter(newNode);

referenceNode = document.getElementById('no-sibling-after');
newNode = document.createElement('li');
newNode.innerText = 'Third new item';
newNode.style.color = '#FF0000';

referenceNode.parentNode.insertAfter(newNode, referenceNode);

referenceNode = document.getElementById('sibling-after');
newNode = document.createElement('li');
newNode.innerText = 'Fourth new item';
newNode.style.color = '#FF0000';

referenceNode.parentNode.insertAfter(newNode, referenceNode);

<h5>No children</h5>
<ul id="no-children"></ul>

<h5>No reference node</h5>
<ul id="no-reference-node">
  <li>First item</li>
</ul>

<h5>No sibling after</h5>
<ul>
  <li id="no-sibling-after">First item</li>
</ul>

<h5>Sibling after</h5>
<ul>
  <li id="sibling-after">First item</li>
  <li>Third item</li>
</ul>

---

이 코드는 작은 CSS 파일 을 인라인 하기 위해 마지막 기존 자식 바로 뒤에 링크 항목을 삽입하는 작업입니다.

var raf, cb=function(){
    //create newnode
    var link=document.createElement('link');
    link.rel='stylesheet';link.type='text/css';link.href='css/style.css';

    //insert after the lastnode
    var nodes=document.getElementsByTagName('link'); //existing nodes
    var lastnode=document.getElementsByTagName('link')[nodes.length-1]; 
    lastnode.parentNode.insertBefore(link, lastnode.nextSibling);
};

//check before insert
try {
    raf=requestAnimationFrame||
        mozRequestAnimationFrame||
        webkitRequestAnimationFrame||
        msRequestAnimationFrame;
}
catch(err){
    raf=false;
}

if (raf)raf(cb); else window.addEventListener('load',cb);

---

 <!DOCTYPE html>
 <html lang="ca">
 <head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script>
        function createDiv(){
            var newDiv = document.createElement("div");
            var txt = document.createTextNode("I'm the second div");
            newDiv.appendChild(txt);
            var x = document.getElementsByTagName("BODY")[0];
            x.insertBefore(newDiv, third);
        }
    </script>
</head>
<body>
    <div class="first">
        <p>
            I'm the first div
        </p>
    </div>
    <div id="third">
        <p>
            I'm the third div
        </p>
    </div>
    <button type= " button " name= " button " onclick = " createDiv() " >
        Create the second Div
    </button>
</body>
</html>

---

appendChild함수를 사용 하여 요소 뒤에 삽입 할 수 있습니다 .

참조 : http://www.w3schools.com/jsref/met_node_appendchild.asp

---

insertAfter의 강력한 구현.

// source: https://github.com/jserz/domPlus/blob/master/src/insertAfter()/insertAfter.js
Node.prototype.insertAfter = Node.prototype.insertAfter || function (newNode, referenceNode) {
  function isNode(node) {
    return node instanceof Node;
  }

  if(arguments.length < 2){
    throw(new TypeError("Failed to execute 'insertAfter' on 'Node': 2 arguments required, but only "+ arguments.length +" present."));
  }

  if(isNode(newNode)){
    if(referenceNode === null || referenceNode === undefined){
      return this.insertBefore(newNode, referenceNode);
    }

    if(isNode(referenceNode)){
      return this.insertBefore(newNode, referenceNode.nextSibling);
    }

    throw(new TypeError("Failed to execute 'insertAfter' on 'Node': parameter 2 is not of type 'Node'."));
  }

  throw(new TypeError("Failed to execute 'insertAfter' on 'Node': parameter 1 is not of type 'Node'."));

};

---

모든 시나리오를 처리 할 수 ​​있습니다.

 function insertAfter(newNode, referenceNode) {
        if(referenceNode && referenceNode.nextSibling && referenceNode.nextSibling.nodeName == '#text')
            referenceNode = referenceNode.nextSibling;

        if(!referenceNode)
            document.body.appendChild(newNode);
        else if(!referenceNode.nextSibling)
            document.body.appendChild(newNode);
        else            
            referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);            
    }

---

if( !Element.prototype.insertAfter ) {
    Element.prototype.insertAfter = function(item, reference) {
        if( reference.nextSibling )
            reference.parentNode.insertBefore(item, reference.nextSibling);
        else
            reference.parentNode.appendChild(item);
    };
}

---

이 질문에 이미 너무 많은 답변이 있지만 정확한 요구 사항을 충족하는 사람은 없습니다.

I wanted a function that has the exact opposite behavior of parentNode.insertBefore - that is, it must accept a null referenceNode (which the accepted answer does not) and where insertBefore would insert at the end of the children this one must insert at the start, since otherwise there'd be no way to insert at the start location with this function at all; the same reason insertBefore inserts at the end.

Since a null referenceNode requires you to locate the parent, we need to know the parent - insertBefore is a method of the parentNode, so it has access to the parent that way; our function doesn't, so we'll need to pass the parent as a parameter.

The resulting function looks like this:

function insertAfter(parentNode, newNode, referenceNode) {
  parentNode.insertBefore(
    newNode,
    referenceNode ? referenceNode.nextSibling : parentNode.firstChild
  );
}

Or (if you must, I don't recommend it) you can of course enhance the Node prototype:

if (! Node.prototype.insertAfter) {
  Node.prototype.insertAfter = function(newNode, referenceNode) {
    this.insertBefore(
      newNode,
      referenceNode ? referenceNode.nextSibling : this.firstChild
    );
  };
}

참고URL : https://stackoverflow.com/questions/4793604/how-to-insert-an-element-after-another-element-in-javascript-without-using-a-lib