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

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

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

referenceNode당신이 원하는 노드는 어디에 있습니까 newNode? 경우 referenceNode때문에, 괜찮 부모 요소 내의 마지막 아이 인 referenceNode.nextSibling것 null및 insertBefore핸들리스트의 말미에 추가하여 케이스 그게.

그래서:

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

다음 스 니펫을 사용하여 테스트 할 수 있습니다.

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

var el = document.createElement("span");
el.innerHTML = "test";
var div = document.getElementById("foo");
insertAfter(div, el);

<div id="foo">Hello</div>

간단한 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

메소드 node.after( doc )는 다른 노드 뒤에 노드를 삽입합니다.

이 개 DOM 노드 node1와 node2,

node1.after(node2)node2이후에 삽입합니다 node1.

이 방법은 구형 브라우저에서는 사용할 수 없으므로 일반적으로 폴리 필이 필요합니다.

2018 솔루션 (나쁜 연습, 2020으로 이동)

나는이 질문이 고대인 것을 알고 있지만 미래의 모든 사용자를 위해 수정 된 프로토 타입은이 프로토 타입이 존재하지 않는 .insertAfter 함수에 대한 마이크로 폴리 필입니다 baseElement.insertAfter(element);. 요소 프로토 타입에 직접 새로운 기능 을 추가합니다 .

Element.prototype.insertAfter = function(new) {
    this.parentNode.insertBefore(new, this.nextSibling);
}

라이브러리, 요지 또는 코드 (또는 참조 할 수있는 다른 위치)에 폴리 필을 배치하면 document.getElementById('foo').insertAfter(document.createElement('bar'));

2019 솔루션 (미운, 2020 년으로 이동)

새로운 편집 : 프로토 타입을 사용하지 않아야합니다. 기본 코드베이스를 덮어 쓰고 매우 효율적이거나 안전하지 않으며 호환성 오류가 발생할 수 있지만 비상업적 프로젝트의 경우 문제가되지 않습니다. 안전한 상용 기능을 원하면 기본 기능 만 사용하십시오. 예쁘지 않지만 작동합니다.

function insertAfter(el, newEl) {
    el.parentNode.insertBefore(newEl, this.nextSibling);
}

// use

const el = document.body || document.querySelector("body");
// the || means "this OR that"

el.insertBefore(document.createElement("div"), el.nextSibling);
// Insert Before

insertAfter(el, document.createElement("div"));
// Insert After 

2020 솔루션

ChildNode의 현재 웹 표준 : https://developer.mozilla.org/en-US/docs/Web/API/ChildNode

현재 생활 수준에 있으며 안전합니다.

지원되지 않는 브라우저의 경우 다음 Polyfill을 사용하십시오. https://github.com/seznam/JAK/blob/master/lib/polyfills/childNode.js

누군가 Polyfill이 Protos를 사용한다고 언급했는데, 나는 그들이 나쁜 연습이라고 말했습니다. 특히 2018 년 솔루션과 같이 잘못 사용되는 경우입니다. 그러나 polyfill은 MDN 설명서에 있으며 더 안전한 초기화 및 실행을 사용합니다. 또한 프로토 타입 덮어 쓰기가 그다지 나쁘지 않은 오래된 브라우저 지원을위한 것입니다.

2020 솔루션 사용 방법 :

const el = document.querySelector(".class");

// Create New Element
const newEl = document.createElement("div");
newEl.id = "foo";

// Insert New Element BEFORE
el.before(newEl);

// Insert New Element AFTER
el.after(newEl);

// Remove Element
el.remove();

// Remove Child
newEl.remove(); // This one wasnt tested but should work

아니면 간단하게 할 수 있습니다 :

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 확장이 올바른 솔루션이 아닐 수도 있습니다 .

그러나이 기사는 2010 년에 작성되었으며 현재 상황이 다를 수 있습니다. 따라서 스스로 결정하십시오.

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

insertBeforeinsertAfter 와 유사하게 작동하는 것이 이상적 입니다. 아래 코드는 다음을 수행합니다.

• 자녀가 없으면 새로운 자녀 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>

나는이 질문에 이미 너무 많은 답변이 있지만, 내 정확한 요구 사항을 충족시키지 못했습니다.

나는 정확히 반대되는 동작을 가진 함수를 원했다.parentNode.insertBeforereferenceNode 즉, 허용되는 대답 이 아닌 null을 받아 들여야 하고 자식 insertBefore의 끝에 삽입 할 위치 는 어디 에서 시작 해야 합니까 ? d이 기능을 사용하여 시작 위치에 삽입 할 방법이 없어야합니다. 같은 이유로 insertBefore끝에 삽입합니다.

널 (null) referenceNode은 부모를 찾아야하므로 부모 (parent)는- insertBefore의 메소드 parentNode이므로 부모에 대한 액세스 권한이 있음을 알아야합니다. 우리의 함수는 그렇지 않으므로 부모를 매개 변수로 전달해야합니다.

결과 함수는 다음과 같습니다.

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

또는 (필요한 경우 권장하지 않습니다) 물론 Node프로토 타입을 향상시킬 수 있습니다 .

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

이 코드는 마지막 기존 자식 바로 다음 에 작은 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);

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);
    };
}

실제로 after()최신 버전의 Chrome, Firefox 및 Opera에서 호출되는 메소드를 사용할 수 있습니다 . 이 방법의 단점은 Internet Explorer가 아직 지원하지 않는다는 것입니다.

예:

// You could create a simple node
var node = document.createElement('p')

// And then get the node where you want to append the created node after
var existingNode = document.getElementById('id_of_the_element')

// Finally you can append the created node to the exisitingNode
existingNode.after(node)

테스트 할 간단한 HTML 코드는 다음과 같습니다.

<!DOCTYPE html>
<html>
<body>
     <p id='up'>Up</p>
    <p id="down">Down</p>
  <button id="switchBtn" onclick="switch_place()">Switch place</button>
  <script>
    function switch_place(){
      var downElement = document.getElementById("down")
      var upElement = document.getElementById("up")
      downElement.after(upElement);
      document.getElementById('switchBtn').innerHTML = "Switched!"
    }
  </script>
</body>
</html>

예상대로 다운 요소 다음에 업 요소를 이동시킵니다.