Kaip įterpti elementą po kito „JavaScript“ elemento, nenaudojant bibliotekos?

„Javascript“ yra insertBefore() , bet kaip įterpti elementą po kito elemento, nenaudojant jQuery ar kitos bibliotekos?

542
25 янв. Xah Lee nustatė sausio 25 d 2011-01-25 15:39 '11, 15:39, 2011-01-25 15:39
@ 18 atsakymų
 referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling); 

Kai referenceNode yra mazgas, kurį norite įdėti į newNode . Jei referenceNode yra paskutinis jo tėvo vaikas, tai yra gerai, nes referenceNode.nextSibling yra null ir insertBefore tvarko, pridedant prie sąrašo pabaigos.

Taigi:

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

Pabandykite čia.

950
25 янв. atsakymą pateikė karim79 25 jan. 2011-01-25 15:42 '11, 15:42, 2011-01-25 15:42

Paprastas javascript bus toks:

Pridėti prie:

 element.parentNode.insertBefore(newElement, element); 

Pridėti po:

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

Tačiau paleiskite kai kuriuos prototipus, kad juos būtų lengviau naudoti.

Sukūrę šiuos prototipus, šią funkciją galite skambinti tiesiogiai iš naujai sukurtų elementų.

  • newElement.appendBefore(element);

  • newElement.appendAfter(element);

border=0

.appendBefore (elementas) Prototipas

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

.appendAfter (elementas) prototipas

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

Ir norėdami pamatyti viską, ką reikia atlikti, atlikite šį kodo fragmentą.

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

46
21 авг. atsakymas suteiktas Armando 21 rug. 2015-08-21 11:05 '15 , 11:05 am 2015-08-21 11:05

Greita „Google“ paieška rodo šį scenarijų.

 // 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 янв. atsakymą davė Jamesas Longas . 2011-01-25 15:43 '11, 15:43, 2011-01-25 15:43

insertAdjacentHTML + outerHTML

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

gauti net

  • DRYer: nereikia saugoti ankstesnio mazgo kintamajame ir naudoti jį du kartus. Jei pervadinsite kintamąjį, pakeiskite mažesnę išvaizdą.
  • golfas yra geresnis nei insertBefore (pertrauka, net jei esamas kintamo mazgo pavadinimas yra 3 simboliai)

Trūkumai:

  • žemesnė naršyklės pagalba: vėliau: https://caniuse.com/#feat=insert-adjacent
  • praranda elemento savybes, pvz., įvykius, nes outerHTML konvertuoja elementą į eilutę. Mums tai reikia, nes insertAdjacentHTML prideda turinį iš styginių, o ne elementų.
27
11 мая '14 в 8:56 2014-05-11 08:56 Ciro Santilli atsakymas 改造 改造 中心 六四 事件 法轮功 Gegužės 11 d., 14 d., 8:56 2014-05-11 08:56

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

kur mazgas1 ir mazgas2 yra DOM mazgai.

.after() yra labai naujas metodas [1] , todėl naršyklės palaikymas gali būti problema.

7
27 окт. atsakymą golopot pateikė spalio 27 d 2016-10-27 10:55 '16 at 10:55 2016-10-27 10:55

Nors insertBefore() (žr. MDN ) insertBefore() ir nurodo daugumą atsakymų čia. Norėdami gauti daugiau lankstumo ir aiškesnio naudojimo, galite naudoti:

insertAdjacentElement () (žr. MDN ). Tai leidžia nurodyti bet kurį elementą ir įterpti perkeliamą elementą, kur norite:

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

Kiti turėtų apsvarstyti panašius naudojimo atvejus: insertAdjacentHTML() ir insertAdjacentText()

Rekomendacijos:

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

6
27 апр. atsakymas pateikiamas bitų mažiau 27 balandžio. 2018-04-27 19:01 '18, 07:01 pm 2018-04-27 19:01

Arba galite tiesiog:

 referenceNode.parentNode.insertBefore( newNode, referenceNode ) referenceNode.parentNode.insertBefore( referenceNode, newNode ) 
4
28 мая '15 в 12:05 2015-05-28 12:05 atsakymas pateikiamas olvlvl gegužės 28 d. 15 val. 12:05 2015-05-28 12:05

1 veiksmas. Paruoškite elementus:

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

2 veiksmas. Įrašyti po:

 elementParent.insertBefore(newElement, element.nextSibling); 
4
03 дек. Atsakymą pateikė Malik Khalil 03 dec. 2016-12-03 23:14 '16 at 23:14 2016-12-03 23:14

Didysis Dustinas Diazas apie tai rašė savo pareigose, analizuodamas ir pasiūlydamas kodą pirmajame atsakyme su nedideliais pakeitimais:

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

2
18 февр. Atsakymas pateikiamas Yoni 18 vasario mėn. 2016-02-18 12:42 '16 at 12:42 pm 2016-02-18 12:42

InsertBefore () yra naudojamas kaip parentNode.insertBefore() . Kad imituotumėte šį metodą ir atliktumėte „ parentNode.insertAfter() metodą, galime parašyti šį kodą.

„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> 

Atkreipkite dėmesį, kad DOM plėtinys gali būti geriausias sprendimas, kaip nurodyta šiame straipsnyje .

Hovewer, šis straipsnis buvo parašytas 2010 m., O dabar viskas gali būti kitokia. Taigi nuspręskite savo.

„JavaScript“ DOM insertAfter () metodas @ jsfiddle.net

2
07 апр. atsakymą pateikė Dmytro Dzyubak, balandžio 7 d 2015-04-07 13:06 '15, 13:06 2015-04-07 13:06

Idealiu atveju, insertAfter turėtų dirbti kaip įterpti . Šis kodas vykdys šiuos veiksmus:

  • Jei vaikų nėra, pridedamas naujas Node .
  • Jei nėra Node nuorodos, pridedamas naujas Node .
  • Jei po nuorodos „ Node nėra Node , pridedamas naujas Node
  • Jei Node nuoroda turi palikuonių, prieš šį brolį įterpiamas naujas Node
  • Grąžinamas naujas Node

Node plėtinys

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

Vienas bendras pavyzdys

 node.parentNode.insertAfter(newNode, node); 

Žr. Kodą

 <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 янв. Atsakymą pateikė Darlesson sausio 14 d. 2017-01-14 01:51 '17 at 1:51 2017-01-14 01:51

patikimas įdiegimo įterpimas.

 // 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 янв. atsakymą pateikė jszhou sausio 15 d 2017-01-15 06:58 '17 at 6:58 2017-01-15 06:58

Šis kodas skirtas įterpti nuorodos elementą iš karto po paskutinio vaiko elemento , esančio mažo css failo pridėjime.

 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 апр. Atsakymas pateikiamas Chetabahana 09 balandžio. 2015-04-09 06:12 '15 at 6:12 2015-04-09 06:12

Žinau, kad šis klausimas jau turi per daug atsakymų, tačiau nė vienas iš jų neatitiko mano tikslų.

Man reikia funkcijos, kuri turi tiksliai priešingą elgesį su „ parentNode.insertBefore - tai reiškia, kad ji turi priimti nulinį referenceNode insertBefore (kuris nėra priimtas atsakant ) ir kur insertBefore įterpimo pabaigoje, insertBefore kurį jis turi įterpti pradžioje, priešingu atveju jis neturėtų įterpti galėtų šią funkciją įterpti į pradinę vietą; dėl tos pačios priežasties insertBefore įdėklus.

Kadangi nulinis referenceNode reikalauja, kad prieš insertBefore , turime žinoti tėvų - insertBefore yra pirminio insertBefore metodas, todėl jis turi prieigą prie patronuojančio tėvų parentNode tokiu būdu; mūsų funkcija nėra, todėl turime perduoti pagrindinį elementą kaip parametrą.

Gauta funkcija atrodo taip:

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

Arba (jei reikia, nerekomenduoju), galite, žinoma, patobulinti Node prototipą:

 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 atsakymas pateikiamas mindplay.dk liepos 20 d., 18 val. 10:17 ; 2018-07-20 10:17

Leidžia apdoroti visus scenarijus

  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 апр. atsakymą pateikė Sami 11 balandis 2018-04-11 13:13 '18 at 13:13 PM 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 Atsakymą pateikė yavuzkavus birželio 13 d. 18 val
  <!DOCTYPE html> <html > 
0
14 окт. atsakymas, kurį pateikė Kunal Awasthi 14 okt. 2016-10-14 12:27 '16 at 12:27 pm 2016-10-14 12:27

Po elemento įterpimo galite naudoti funkciją „ appendChild .

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

0
14 дек. Atsakymą pateikė Doug LN 14 d. 2016-12-14 15:12 '16 at 15:12 2016-12-14 15:12

Kiti klausimai apie „ žymes arba Užduoti klausimą