243

ฉันมีองค์ประกอบ E และฉันจะผนวกองค์ประกอบบางอย่างเข้าด้วยกัน ทันใดนั้นฉันก็พบว่าองค์ประกอบต่อไปควรเป็นลูกคนแรกของ E กลอุบายคืออะไรทำอย่างไร? วิธีการยกเลิกการเปลี่ยนไม่ทำงานเนื่องจาก E เป็นวัตถุไม่ใช่อาร์เรย์

ทางยาวจะเป็นการย้ำลูกของรางน้ำ E และเพื่อย้ายปุ่ม'em ++ แต่ฉันแน่ใจว่ามีวิธีที่สวยกว่า

— Popara
แหล่งที่มา

1

พวกคุณเร็วมาก! ฉันขอโทษฉันคิดว่าฉันเข้าใจผิด องค์ประกอบ e | - child-el_1 | - child-el_2 | - child-el_3 จากนั้น child-el_4 ... ซึ่งจะต้องมีความเหมาะสมเหมือนเด็กคนแรก การเติมจะทำให้ child-el_4 ก่อน [b] e [/ b] ฉันผิดและเหนื่อยหรืออะไร

— Popara

472

var eElement; // some E DOM instance
var newFirstElement; //element which should be first in E

eElement.insertBefore(newFirstElement, eElement.firstChild);

— nemisj
แหล่งที่มา

3

คุณเพื่อนของฉันเพียงรับหมีของคุณเอง! การค้นพบพิเศษที่มีประโยชน์ docs.jquery.com/Manipulation/insertBefore

— Popara

79

สำหรับข้อมูลหากไม่มีองค์ประกอบในพาเรนต์เด็กจะถูกเพิ่มต่อไป

— Knu

ในกรณีของ firstChild เป็นโหนดข้อความพ่นข้อยกเว้น แต่ jquery prepend ไม่ใช่ dous

— Sergey Sahakyan

3

@ Sergey ใช้ได้กับฉันกับ text node ด้วยทดสอบบน Firefox และ Chromium เบราว์เซอร์ใดที่คุณใช้ คุณแน่ใจหรือว่าปัญหาไม่ได้อยู่ข้างคุณ? คุณสนใจเตรียมเกร็ดเล็กเกร็ดน้อย / jsfiddle ที่ทำให้เกิดปัญหาหรือไม่?

— ผู้ใช้

list.outerHTML = entry.outerHTML + list.outerHTML; หวังว่าจะช่วยให้ใครบางคน

— Deniz Porsuk

106

รุ่น 2017

คุณสามารถใช้ได้

targetElement.insertAdjacentElement('afterbegin', newFirstElement)

จากMDN :

เมธอด insertAdighborElement () จะแทรกโหนดองค์ประกอบที่กำหนดที่ตำแหน่งที่กำหนดโดยสัมพันธ์กับองค์ประกอบที่ถูกเรียกใช้

position
A DOMString แสดงถึงตำแหน่งที่สัมพันธ์กับองค์ประกอบ ต้องเป็นหนึ่งในสตริงต่อไปนี้
beforebegin:: ก่อนองค์ประกอบเอง
afterbegin: อยู่ในองค์ประกอบก่อนลูกคนแรก
beforeend: อยู่ในองค์ประกอบหลังจากลูกคนสุดท้าย
afterend: หลังจากองค์ประกอบเอง

องค์ประกอบ
องค์ประกอบที่จะแทรกลงในต้นไม้

นอกจากนี้ในครอบครัวที่insertAdjacentมีวิธีพี่น้อง:

element.insertAdjacentHTML('afterbegin','htmlText')สำหรับการฉีดสตริง html โดยตรงเช่นinnerHTMLแต่ไม่มีการทับทุกอย่างดังนั้นคุณสามารถข้ามกระบวนการกดขี่document.createElementและแม้แต่สร้างทั้งเซ็ตเซ็ตโดยใช้กระบวนการจัดการสตริง

element.insertAdjacentTextสำหรับการฉีดสารฆ่าเชื้อสตริงลงในองค์ประกอบ ไม่อีกแล้วencode/decode

— pery mimon
แหล่งที่มา

2

คำแนะนำที่ดี แต่ทำไม "ย้อนกลับไปปี 2017" นี่เป็นวิธีมาตรฐานแม้ใน IE8

— Vitaliy Terziev

ขอบคุณ และขอขอบคุณสำหรับความเข้าใจของคุณ ชื่อสำหรับการช่วยให้ผู้คนเห็นความแตกต่างได้อย่างรวดเร็วนั่นคือคำตอบใหม่

— Pery Mimon

เกิดอะไรขึ้นถ้าองค์ประกอบ = document.importNode (documentfragment จริง)

— Martin Meeser

ว่าการกลับมาelementtypeof ที่ได้มีdocument-fragment insertAdjacent...()จนกว่าเราจะได้ดีขึ้นตอบเดาที่ดีที่สุดของคุณคือการผนวกกับfragment divทำให้การจัดการ Dom ของคุณและจากนั้นใช้Range.selectNodeContents()และRange.extractContents()จะได้รับกลับส่วน

— Pery Mimon

โดยที่ 'องค์ประกอบ' เป็นองค์ประกอบที่คุณต้องการเพิ่มและ 'องค์ประกอบ' เป็นองค์ประกอบที่คุณต้องการเพิ่ม)

— bokkie

96

รุ่น 2018

parentElement.prepend(newFirstChild)

นี่คือ JS สมัยใหม่! สามารถอ่านได้มากกว่าตัวเลือกก่อนหน้า ปัจจุบันมีให้บริการใน Chrome, FF และ Opera

PS คุณสามารถเติมสตริงได้โดยตรง

parentElement.prepend('This text!')

developer.mozilla.org

ฉันสามารถใช้ - 94% พฤษภาคม 2020

polyfill

— Gibolt
แหล่งที่มา

6

ทางออกที่ดีขอบคุณ! มันทำให้ฉันหงุดหงิดที่พวกเขาตัดสินใจที่จะเพิ่มเด็กไปยังจุดสิ้นสุด.appendChild()แต่การเพิ่มไปยังจุดเริ่มต้นคือ.prepend()แทนที่จะติดกับการประชุมและเรียกมันว่า.prependChild()

— Marquizzo

1

append()มีอยู่เช่นกันทำงานในลักษณะเดียวกันprepend()แต่ในตอนท้าย

— Gibolt

1

ฉันยังสับสนเมื่อเห็นคำถามเหล่านี้ถามเกี่ยวกับการนำไปใช้prependในขณะที่ฉันพบว่ามันเป็นเช่นนั้น :( โอเคมันไม่มีอยู่ในอดีต

— ริ

10

คุณสามารถนำไปใช้โดยตรงกับทุกองค์ประกอบ HTML หน้าต่างของคุณ
แบบนี้ :

HTMLElement.prototype.appendFirst=function(childNode){
    if(this.firstChild)this.insertBefore(childNode,this.firstChild);
    else this.appendChild(childNode);
};

— yorg
แหล่งที่มา

prependเทียบเท่ากับวานิลลา JS โดยไม่ต้องมีต้นแบบ มันจะเป็นมาตรฐานใน ES7 และคุณควรใช้ถ้าเป็นไปได้สำหรับใบสมัครของคุณ

— Gibolt

6

คำตอบที่ได้รับการยอมรับ refactored เป็นฟังก์ชั่น:

function prependChild(parentEle, newFirstChildEle) {
    parentEle.insertBefore(newFirstChildEle, parentEle.firstChild)
}

— Joseph Dykstra
แหล่งที่มา

+1 สำหรับการใช้ความสัมพันธ์กับผู้ปกครองเด็ก คำตอบที่ยอมรับนั้นไม่มี ฉันจำเป็นต้องรู้ว่าอะไรeElementคือสิ่งที่จะทำให้รู้สึก และสำหรับสิ่งนั้นฉันต้องอ่านคำถาม ส่วนใหญ่ฉันจะตรวจสอบชื่อและไปที่คำตอบโดยไม่สนใจรายละเอียดคำถาม

— akinuri

4

ถ้าฉันไม่เข้าใจผิด:

$("e").prepend("<yourelem>Text</yourelem>");

หรือ

$("<yourelem>Text</yourelem>").prependTo("e");

แม้ว่ามันจะดูเหมือนว่าจากคำอธิบายของคุณว่ามีเงื่อนไขบางอย่างที่แนบมาดังนั้น

if (SomeCondition){
    $("e").prepend("<yourelem>Text</yourelem>");
}
else{
    $("e").append("<yourelem>Text</yourelem>");
}

— เจมส์ผู้วิเศษ
แหล่งที่มา

+1 สำหรับรุ่น $! ฉันกำลังเขียน jQuery ขยาย func ดังนั้นฉันจะใช้รุ่นเนทิฟเมื่อใดก็ตามที่ฉันสามารถทำได้ด้วยเหตุผลด้านประสิทธิภาพ แต่มันสมบูรณ์แบบ!

— Taylor Evanson

นาเขากำลังมองหาจาวาสคริปต์ไม่ใช่ jquery

— vinyll

2

ฉันคิดว่าคุณกำลังมองหาฟังก์ชั่น. preprendใน jQuery รหัสตัวอย่าง:

$("#E").prepend("<p>Code goes here, yo!</p>");

— Emil Vikström
แหล่งที่มา

พวกคุณเร็วมาก! ฉันขอโทษฉันคิดว่าฉันเข้าใจผิด องค์ประกอบ e | - child-el_1 | - child-el_2 | - child-el_3 จากนั้น child-el_4 ... ซึ่งจะต้องมีความเหมาะสมเหมือนเด็กคนแรก การเติมจะทำให้ child-el_4 ก่อน [b] e [/ b] ฉันผิดและเหนื่อยหรืออะไร

— Popara

0

ฉันสร้างต้นแบบนี้เพื่อเติมองค์ประกอบให้กับองค์ประกอบหลัก

Node.prototype.prependChild = function (child: Node) {
    this.insertBefore(child, this.firstChild);
    return this;
};

— Raza
แหล่งที่มา

0

var newItem = document.createElement("LI");       // Create a <li> node
var textnode = document.createTextNode("Water");  // Create a text node
newItem.appendChild(textnode);                    // Append the text to <li>

var list = document.getElementById("myList");    // Get the <ul> element to insert a new node
list.insertBefore(newItem, list.childNodes[0]);  // Insert <li> before the first child of <ul>

https://www.w3schools.com/jsref/met_node_insertbefore.asp

— แมว Ilker
แหล่งที่มา

วิธีการตั้งองค์ประกอบ DOM เป็นลูกคนแรก?

รุ่น 2017

รุ่น 2018