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

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

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

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

Ответы [ 17 ]

1108 голосов
/ 25 января 2011 
referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);

Где referenceNode - узел, который вы хотите поставить newNode после. Если referenceNode является последним дочерним элементом в родительском элементе, это нормально, поскольку referenceNode.nextSibling будет null, а insertBefore обрабатывает этот случай, добавляя в конец списка.

Итак: 

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

Попробуйте здесь.

71 голосов
/ 21 августа 2015

Простой JavaScript будет следующим:

Добавить до: 

element.parentNode.insertBefore(newElement, element);

Добавить после: 

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

Но для простоты использования добавьте несколько прототипов

Создав следующие прототипы, вы сможете вызывать эти функции непосредственно из вновь созданных элементов.

  • newElement.appendBefore(element);

  • newElement.appendAfter(element);

.appendBefore (элемент)Прототип 

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

.appendAfter (элемент) Прототип 

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

37 голосов

insertAdjacentHTML + outerHTML

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

Верх:

  • СУШКА: вам не нужно хранить узел before впеременная и использовать его дважды.Если вы переименуете переменную, в меньшей степени, чтобы изменить.
  • лучше, чем insertBefore (безубыточность, если имя переменной существующего узла имеет длину 3 символа)поскольку более новые: https://caniuse.com/#feat=insert-adjacent
  • потеряют свойства элемента, такие как события, потому что outerHTML преобразует элемент в строку.Нам это нужно, потому что insertAdjacentHTML добавляет содержимое из строк, а не элементов.
34 голосов
/ 25 января 2011

Быстрый поиск в 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);
    }
}
10 голосов
/ 27 апреля 2018

Хотя 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

9 голосов
/ 27 октября 2016

node1.after(node2) создает <node1/><node2/>,

, где node1 и node2 являются узлами DOM.

.after() не поддерживается в старых браузерах [1] ,поэтому вам может понадобиться применить полифилл.

4 голосов
/ 03 декабря 2016

Шаг 1. Подготовьте элементы: 

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

Шаг 2. Добавить после: 

elementParent.insertBefore(newElement, element.nextSibling);
4 голосов
/ 28 мая 2015

Или вы можете просто сделать: 

referenceNode.parentNode.insertBefore( newNode, referenceNode )
referenceNode.parentNode.insertBefore( referenceNode, newNode )
2 голосов
/ 07 апреля 2015

метод insertBefore () используется как parentNode.insertBefore().Таким образом, чтобы имитировать это и создать метод parentNode.insertAfter(), мы можем написать следующий код.

JavaScript 

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 () method @ jsfiddle.net

1 голос
/ 14 января 2017

В идеале 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>
Страница:
...