Bagaimana cara memasukkan item setelah item lain dalam javascript tanpa menggunakan perpustakaan?

Ada insertBefore() di javascript, tetapi bagaimana saya bisa memasukkan elemen setelah elemen lain tanpa menggunakan jQuery atau pustaka lain?

542
25 янв. ditetapkan oleh Xah Lee pada 25 Januari 2011-01-25 15:39 '11 pada 15:39 2011-01-25 15:39
@ 18 jawaban
 referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling); 

Di mana referenceNode adalah simpul yang ingin Anda letakkan newNode setelah. Jika referenceNode adalah anak terakhir dari orang tuanya, ini baik-baik saja, karena referenceNode.nextSibling adalah null dan insertBefore menangani ini dengan menambahkan ke akhir daftar.

Jadi:

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

Coba di sini.

950
25 янв. jawabannya diberikan oleh karim79 25 januari. 2011-01-25 15:42 '11 pada 15:42 2011-01-25 15:42

Javascript sederhana adalah sebagai berikut:

Tambahkan ke:

 element.parentNode.insertBefore(newElement, element); 

Tambahkan setelah:

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

Tapi, jalankan beberapa prototipe di sana untuk kemudahan penggunaan.

Dengan membuat prototipe berikut, Anda dapat memanggil fungsi ini >

  • newElement.appendBefore(element);

  • newElement.appendAfter(element);

.appendBefore (elemen) Prototype

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

.appendAfter (elemen) Prototipe

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

Dan untuk melihat semuanya berjalan, jalankan cuplikan kode berikut.

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

46
21 авг. jawabannya diberikan Armando 21 Agustus. 2015-08-21 11:05 '15 jam 11:05 2015-08-21 11:05

Pencarian google cepat menunjukkan skrip ini.

 // 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 next sibling. parent.insertBefore(newElement, targetElement.nextSibling); } } 
31
25 янв. jawabannya diberikan oleh James Long pada 25 Januari. 2011-01-25 15:43 '11 pada 15:43 2011-01-25 15:43

insertAdjacentHTML + outerHTML

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

membalas dendam

  • DRYer: Anda tidak perlu menyimpan node sebelumnya dalam sebuah variabel dan menggunakannya dua kali. Jika Anda mengganti nama variabel, maka dengan tampilan yang lebih kecil untuk perubahan.
  • golf lebih baik daripada insertBefore (istirahat, bahkan jika nama yang ada dari simpul variabel adalah 3 karakter)

Kekurangan:

  • dukungan browser yang lebih rendah: nanti: https://caniuse.com/#feat=insert-adjacent
  • kehi>outerHTML mengubah elemen menjadi string. Kami memerlukan ini karena insertAdjacentHTML menambahkan konten dari string, bukan elemen.
27
11 мая '14 в 8:56 2014-05-11 08:56 balasan yang diberikan oleh Ciro Santilli 改造 改造 中心 六四 事件 法轮功 11 Mei, '14 pukul 8:56 2014-05-11 08:56

node1.after(node2) menghasilkan <node1/><node2/> ,

di mana node1 dan node2 adalah node DOM.

.after() adalah metode yang sangat baru [1] , sehingga dukungan browser dapat menjadi masalah.

7
27 окт. jawabannya diberikan oleh golopot pada 27 Oktober 2016-10-27 10:55 '16 pada 10:55 2016-10-27 10:55

Meskipun insertBefore() (lihat MDN ) insertBefore() dan merujuk ke sebagian besar jawaban di sini. Untuk fleksibilitas dan penggunaan yang lebih jelas, Anda dapat menggunakan:

insertAdjacentElement () (lihat MDN ). Ini memungkinkan Anda untuk merujuk ke elemen apa pun dan memasukkan elemen yang dapat dipindahkan di mana Anda inginkan:

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

Orang lain harus mempertimbangkan kasus penggunaan serupa: insertAdjacentHTML() dan insertAdjacentText()

Rekomendasi:

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

6
27 апр. jawabannya diberikan sedikit kurang 27 apr. 2018-04-27 19:01 '18 pada 19:01 2018-04-27 19:01

Atau Anda bisa melakukannya:

 referenceNode.parentNode.insertBefore( newNode, referenceNode ) referenceNode.parentNode.insertBefore( referenceNode, newNode ) 
4
28 мая '15 в 12:05 2015-05-28 12:05 jawabannya diberikan olvlvl 28 Mei '15 pukul 12:05 2015-05-28 12:05

>

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

>

 elementParent.insertBefore(newElement, element.nextSibling); 
4
03 дек. Jawabannya diberikan oleh Malik Khalil 03 Desember. 2016-12-03 23:14 '16 pada 23:14 2016-12-03 23:14

Dustin Diaz yang hebat menulis tentang ini di posnya, menganalisisnya dan menawarkan kode pada jawaban pertama dengan perubahan kecil:

http://www.dustindiaz.com/top-ten-javascript 

2
18 февр. Jawabannya diberikan Yoni 18 Feb. 2016-02-18 12:42 '16 pada 12:42 malam 2016-02-18 12:42

insertBefore () digunakan sebagai parentNode.insertBefore() . Untuk meniru ini dan membuat metode parentNode.insertAfter() , kita dapat menulis kode berikut.

Javascript

 Node.prototype.insertAfter = function(newNode, referenceNode) { return referenceNode.parentNode.insertBefore( newNode, referenceNode.nextSibling); // based on karim79 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> 

Harap perhatikan bahwa ekstensi DOM mungkin bukan solusi terbaik untuk Anda, seperti yang ditunjukkan dalam artikel ini .

Hovewer, artikel ini ditulis pada tahun 2010, dan sekarang semuanya bisa berbeda. Jadi putuskan sendiri.

JavaScript DOM insertAfter () metode @ jsfiddle.net

2
07 апр. jawabannya diberikan oleh Dmytro Dzyubak 07 Apr 2015-04-07 13:06 '15 pada 13:06 2015-04-07 13:06

Idealnya, insertAfter harus berfungsi seperti insertBefore . Kode berikut akan menjalankan yang berikut:

  • Jika tidak ada anak, Node baru ditambahkan.
  • Jika tidak ada tautan Node , Node baru ditambahkan.
  • Jika tidak ada Node setelah tautan Node , Node baru ditambahkan.
  • Jika tautan Node memiliki turunan, maka Node baru dimasukkan sebelum saudara ini
  • Mengembalikan Node baru

Ekstensi Node

 Node.prototype.insertAfter = function(node, referenceNode) { if (node) this.insertBefore(node, referenceNode  referenceNode.nextSibling); return node; }; 

Salah satu contoh umum

 node.parentNode.insertAfter(newNode, node); 

Lihat kode

 <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> 
1
14 янв. Jawabannya diberikan oleh Darlesson pada 14 Januari. 2017-01-14 01:51 '17 pada 1:51 2017-01-14 01:51

implementasi insertAfter yang andal.

 // 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
15 янв. jawabannya diberikan oleh jszhou 15 Jan 2017-01-15 06:58 '17 pada 6:58 2017-01-15 06:58

Kode ini dimaksudkan untuk menyisipkan elemen tautan segera setelah elemen anak terakhir yang ada dalam lampiran file css kecil.

 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
09 апр. Jawabannya diberikan Chetabahana 09 April. 2015-04-09 06:12 '15 pada 6:12 2015-04-09 06:12

Saya tahu bahwa pertanyaan ini sudah memiliki terlalu banyak jawaban, tetapi tidak satupun dari mereka memenuhi persyaratan yang tepat.

Saya membutuhkan fungsi yang memiliki perilaku berlawanan yang tepat dari parentNode.insertBefore - yaitu, ia harus menerima zero referenceNode (yang tidak diterima sebagai respons ) dan di mana insertBefore akan memasukkan di akhir insertBefore yang harus disisipkan di awal, jika tidak maka tidak akan akan dapat menyisipkan di lokasi asli dengan fungsi ini; untuk alasan yang sama, insertBefore memasukkan di akhir.

Karena zero referenceNode mengharuskan Anda untuk parentNode orangtua, kami perlu mengetahui induk - insertBefore adalah metode parentNode , sehingga ia memiliki akses ke parent parentNode dengan cara ini; tidak ada fungsi kita, jadi kita perlu melewatkan elemen induk sebagai parameter.

Fungsi yang dihasilkan terlihat seperti ini:

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

Atau (jika perlu, saya tidak merekomendasikan), Anda tentu saja dapat meningkatkan prototipe Node :

 if (! Node.prototype.insertAfter) { Node.prototype.insertAfter = function(newNode, referenceNode) { this.insertBefore( newNode, referenceNode ? referenceNode.nextSibling : this.firstChild ); }; } 
0
20 июля '18 в 10:17 2018-07-20 10:17 jawabannya diberikan kepada mindplay.dk 20 Juli, '18 pukul 10:17 ; 2018-07-20 10:17

Mengizinkan memproses semua skrip

  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
11 апр. jawabannya diberikan oleh Sami 11 Apr 2018-04-11 13:13 '18 pukul 13.13 2018-04-11 13:13
 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
13 июня '18 в 17:06 2018-06-13 17:06 Jawaban diberikan oleh yavuzkavus pada 13 Juni '18 pada 17:06 2018-06-13 17:06
  <!DOCTYPE html> <html > 
0
14 окт. balasan yang diberikan oleh Kunal Awasthi 14 Oktober. 2016-10-14 12:27 '16 pukul 12:27 malam 2016-10-14 12:27

Anda dapat menggunakan fungsi appendChild untuk menyisipkan setelah elemen.

Tautan: http://www.w3schools.com/jsref/met_node_appendchild.asp

0
14 дек. Jawabannya diberikan oleh Doug LN 14 Des. 2016-12-14 15:12 '16 pada 15:12 2016-12-14 15:12

Pertanyaan lain tentang tag atau Ask a question