วิธีแทรกองค์ประกอบหลังจากองค์ประกอบอื่นใน JavaScript โดยไม่ต้องใช้ห้องสมุดได้อย่างไร

มีinsertBefore()อยู่ใน JavaScript แต่ฉันจะแทรกองค์ประกอบหลังจากองค์ประกอบอื่นโดยไม่ใช้ 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>

จาวาสคริปต์ตรงไปตรงมาจะเป็นดังต่อไปนี้:

ผนวกก่อน:

element.parentNode.insertBefore(newElement, element);

ผนวกหลังจาก:

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

แต่โยนต้นแบบบางอย่างในนั้นเพื่อความสะดวกในการใช้งาน

ด้วยการสร้างต้นแบบต่อไปนี้คุณจะสามารถเรียกใช้ฟังก์ชันเหล่านี้ได้โดยตรงจากองค์ประกอบที่สร้างขึ้นใหม่

• newElement.appendBefore(element);

• newElement.appendAfter(element);

. ผนวก Before (องค์ประกอบ) ต้นแบบ

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

insertAdjacentHTML + outerHTML

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

upsides:

• เครื่องอบแห้ง: คุณไม่จำเป็นต้องเก็บโหนดไว้ก่อนในตัวแปรและใช้มันสองครั้ง หากคุณเปลี่ยนชื่อตัวแปรในการแก้ไขน้อยกว่า
• golfs ดีกว่าinsertBefore(break แม้ว่าชื่อโหนดที่มีอยู่คือ 3 chars)

ข้อเสีย:

• การสนับสนุนเบราว์เซอร์ที่ต่ำลงตั้งแต่ใหม่กว่า: https://caniuse.com/#feat=insert-adighbor
• จะสูญเสียคุณสมบัติขององค์ประกอบเช่นเหตุการณ์เนื่องจาก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/insertAdvertiseElement https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdvertiseHTML https: // developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentText

เมธอดnode.after( doc ) แทรกโหนดหลังโหนดอื่น

สำหรับสองโหนด DOM node1และnode2,

node1.after(node2)แทรกหลังnode2node1

วิธีนี้ไม่สามารถใช้ได้กับเบราว์เซอร์รุ่นเก่าดังนั้นโดยปกติจะต้องมีการเติม

โซลูชัน 2018 (การปฏิบัติที่ไม่ดีไปที่ 2020)

ฉันรู้ว่าคำถามนี้โบราณ แต่สำหรับผู้ใช้ในอนาคตใด ๆ เธอเป็นต้นแบบดัดแปลงนี้เป็นเพียง micro polyfill สำหรับฟังก์ชั่น. insAfterAfter ที่ไม่ได้มีอยู่ต้นแบบนี้โดยตรงเพิ่มฟังก์ชั่นใหม่baseElement.insertAfter(element);ต้นแบบธาตุ:

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

เมื่อคุณวางโปลิฟิลในห้องสมุดส่วนสำคัญหรือเพียงแค่ในรหัสของคุณ (หรือที่ใดก็ได้ที่สามารถอ้างอิงได้) เพียงแค่เขียน document.getElementById('foo').insertAfter(document.createElement('bar'));

โซลูชัน 2019 (น่าเกลียดไปที่ 2020)

ใหม่แก้ไข: คุณไม่ควรใช้ PROTOTYPES พวกเขาเขียนทับ codebase เริ่มต้นและ arent มีประสิทธิภาพมากหรือปลอดภัยและอาจทำให้เกิดข้อผิดพลาดในการใช้งานร่วมกันได้ แต่ถ้าสำหรับโครงการที่ไม่ใช่เชิงพาณิชย์ หากคุณต้องการฟังก์ชั่นที่ปลอดภัยสำหรับการใช้งานเชิงพาณิชย์เพียงแค่ใช้ฟังก์ชั่นเริ่มต้น มันไม่สวย แต่ใช้งานได้:

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 

2563 โซลูชั่น

มาตรฐานเว็บปัจจุบันสำหรับ 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อย่างไรก็ตามโพลีฟิลนั้นอยู่ในเอกสาร MDN และใช้การเริ่มต้นและการดำเนินการชนิดที่ปลอดภัยยิ่งขึ้น นอกจากนี้สำหรับการสนับสนุนเบราว์เซอร์รุ่นเก่าในวันและอายุที่ Prototype Overwriting ไม่เลวร้ายนัก

วิธีใช้โซลูชัน 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()เราสามารถเขียนโค้ดต่อไปนี้

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 อาจจะไม่ได้ทางออกที่เหมาะสมสำหรับคุณตามที่ระบุไว้ในบทความนี้

Hovewer บทความนี้เขียนขึ้นในปี 2010 และสิ่งต่างๆอาจแตกต่างไปในขณะนี้ ดังนั้นตัดสินใจด้วยตัวคุณเอง

JavaScript DOM insertAfter () วิธีการ @ jsfiddle.net

จะเป็นการดีที่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>

ฉันรู้ว่าคำถามนี้มีคำตอบมากมายเหลือเกินแล้ว แต่ก็ไม่มีใครตอบสนองความต้องการที่แน่นอนของฉันได้

ฉันต้องการฟังก์ชั่นที่มีพฤติกรรมตรงข้ามแน่นอนparentNode.insertBefore - นั่นคือต้องยอมรับ null referenceNode(ซึ่งคำตอบที่ยอมรับไม่ได้) และตำแหน่งที่insertBeforeจะแทรกที่ส่วนท้ายของเด็ก ๆ สิ่งนี้ต้องแทรกในตอนเริ่มต้นเพราะมิฉะนั้นจะมี ' d ไม่มีวิธีแทรกที่ตำแหน่งเริ่มต้นด้วยฟังก์ชันนี้เลย; insertBeforeแทรกเหตุผลเดียวกันในตอนท้าย

เนื่องจาก null 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
    );
  };
}

รหัสนี้ใช้เพื่อแทรกรายการลิงก์หลังจากชายด์ที่มีอยู่ล่าสุดเพื่อฝังไฟล์ 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>

ตามที่คาดไว้มันจะย้ายองค์ประกอบขึ้นหลังจากองค์ประกอบลง