Как вставить элемент за другим элементом в JavaScript без использования библиотеки? - PullRequest
Новая
       105

Как вставить элемент за другим элементом в JavaScript без использования библиотеки?

625 голосов
/ 25 января 2011

В JavaScript insertBefore(), но как я могу вставить элемент после другого элемента без использования jQuery или другой библиотеки?

Ответы [ 17 ]

0 голосов
/ 20 июля 2018

Я знаю, что на этот вопрос уже слишком много ответов, но ни один из них не отвечал моим точным требованиям.

Я хотел, чтобы функция имела абсолютно противоположное поведение parentNode.insertBefore - то есть она должна принимать ноль referenceNode (а принятый ответ - нет) и где insertBefore будет вставлять в конец дочерних элементов, которые необходимо вставить в начало , так как в противном случае не было бы никакого способа вставить в начальное местоположение с этой функцией в все; по той же причине insertBefore вставляет в конце.

Поскольку нулевое referenceNode требует от вас найти родителя, нам нужно знать родителя - 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
    );
  };
}
0 голосов
/ 13 июня 2018 
if( !Element.prototype.insertAfter ) {
    Element.prototype.insertAfter = function(item, reference) {
        if( reference.nextSibling )
            reference.parentNode.insertBefore(item, reference.nextSibling);
        else
            reference.parentNode.appendChild(item);
    };
}
0 голосов
/ 11 апреля 2018

Позволяет обрабатывать все сценарии 

 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);            
    }
0 голосов
/ 15 января 2017

надежная реализация 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'."));

};

0 голосов
/ 14 декабря 2016

Вы можете использовать функцию appendChild для вставки после элемента.

Ссылка: http://www.w3schools.com/jsref/met_node_appendchild.asp

0 голосов
/ 09 апреля 2015

Этот код работает для вставки элемента ссылки сразу после последнего существующего дочернего элемента в вставку небольшого файла 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);
0 голосов
/ 14 октября 2016 
 <!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>
Страница:
...