كيفية تعيين عنصر DOM كأول طفل؟

Question

لدي عنصر E وانا افضل بعض العناصر إليها. فجأة، ألقي أن يكون العنصر التالي يجب أن يكون أول طفل من E. ما هي الخدعة، وكيفية القيام بذلك؟ الطريقة UNSHIFT لا تعمل لأن E هو كائن، وليس صفيف.

من شأنه أن يكون هو تكرر أطفال الحوض الإلكترونية ولتحويل المفتاح ++، لكنني متأكد من أن هناك طريقة أجمل.

Answer 1

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

eElement.insertBefore(newFirstElement, eElement.firstChild);

Answer 2

2017 الإصدار

يمكنك استخدام

targetElement.insertAdjacentElement('afterbegin', newFirstElement)

من MDN. :

تقوم طريقة InsertAdJacentelement () بإدراج عقدة عنصر معينة في وضع معين بالنسبة للعنصر الذي يتم استدعاء عليه.

وضع
Domstring يمثل الموقف بالنسبة للعنصر؛ يجب أن تكون واحدة من السلاسل التالية:
beforebegin: قبل العنصر نفسه.
afterbegin: فقط داخل العنصر، قبل أول طفل لها.
beforeend: فقط داخل العنصر، بعد آخر طفل لها.
afterend: بعد العنصر نفسه.

جزء
يجب إدراج العنصر في الشجرة.

أيضا في عائلة insertAdjacent هناك طرق الأخوة:

element.insertAdjacentHTML('afterbegin','htmlText') لحقن سلسلة HTML مباشرة، مثل innerHTML ولكن دون الإفراط في كل شيء، حتى تتمكن من القفز عملية قمعية document.createElement وحتى بناء مكون كامل مع عملية معالجة السلسلة

element.insertAdjacentText لحقن تعقيم سلسلة في عنصر. لا أكثر encode/decode

Answer 3

2018 الإصدار

parentElement.prepend(newFirstChild);

هذا هو الحديث JS! إنه أكثر قابلية للقراءة من الخيارات السابقة. وهي متوفرة حاليا في Chrome و FF و Opera.

ملاحظة: يمكنك إضفاء مباشرة سلاسل

parentElement.prepend('This text!');

developer.mozilla.org.

هل بإمكاني استخدم - 91٪ يوليو 2019

polyfn

Answer 4

يمكنك تطبيقه مباشرة أنا جميع عناصر نافذة HTML الخاصة بك.
مثله :

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

Answer 5

الإجابة المقبولة تم إعادة شحنها إلى وظيفة:

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

Answer 6

ما لم أسيء فهمها:

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

أو

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

على الرغم من أنه يبدو وكأنه من الوصف الخاص بك أن هناك بعض الشرط المرفقة، لذلك

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

Answer 7

أعتقد أنك تبحث عن .Prepend. وظيفة في jQuery. رمز المثال:

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

Answer 8

قمت بإنشاء هذا النموذج الأولي لإعداد العناصر إلى عنصر الوالدين.

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

Answer 9

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.asp.asp.