javascript - شرح - كود تسجيل الدخول بالجافا سكربت




كيف يمكنني تنفيذ prepend وإلحاق جافا سكريبت العادية؟ (8)

prepend دون JQuery:

parent.insertBefore(child, parent.firstChild);

تحديث

يدعم Chrome و Firefox و Safari (WebKit) prepend .

parentNode.prepend(child);

كيف يمكنني تنفيذ prepend append مع JavaScript عادية دون استخدام jQuery؟


أضفت هذا إلى مشروعي ويبدو أنه يعمل:

HTMLElement.prototype.prependHtml = function (element) {
    const div = document.createElement('div');
    div.innerHTML = element;
    this.insertBefore(div, this.firstChild);
};

HTMLElement.prototype.appendHtml = function (element) {
    const div = document.createElement('div');
    div.innerHTML = element;
    while (div.children.length > 0) {
        this.appendChild(div.children[0]);
    }
};

مثال:

document.body.prependHtml(`<a href="#">Hello World</a>`);
document.body.appendHtml(`<a href="#">Hello World</a>`);

إذا كنت تريد إدراج سلسلة HTML خامًا بغض النظر عن مدى تعقيدها ، فيمكنك استخدام: insertAdjacentHTML ، باستخدام أول وسيطة مناسبة:

"beforebegin" قبل العنصر نفسه. "afterbegin" فقط داخل العنصر ، قبل أول طفل. 'beforeend' فقط داخل العنصر ، بعد الطفل الأخير. "afterend" بعد العنصر نفسه.

تلميح: يمكنك دائمًا استدعاء Element.outerHTML للحصول على سلسلة HTML تمثل العنصر المراد إدراجه.

مثال على الاستخدام:

document.getElementById("foo").insertAdjacentHTML("beforeBegin",
          "<div><h1>I</h1><h2>was</h2><h3>inserted</h3></div>");

DEMO

تحذير: insertAdjacentHTML لا يحافظ على المستمعين حيث تعلق مع .addEventLisntener .


إليك مقتطف لإجرائك:

theParent = document.getElementById("theParent");
theKid = document.createElement("div");
theKid.innerHTML = 'Are we there yet?';

// append theKid to the end of theParent
theParent.appendChild(theKid);

// prepend theKid to the beginning of theParent
theParent.insertBefore(theKid, theParent.firstChild);

theParent.firstChild إشارة إلى العنصر الأول داخل theParent ووضع theKid قبله.


من أجل تبسيط حياتك ، يمكنك توسيع HTMLElement . قد لا يعمل ذلك مع المتصفحات القديمة ، ولكنه يجعل حياتك أسهل بالتأكيد:

HTMLElement = typeof(HTMLElement) != 'undefiend' ? HTMLElement : Element;

HTMLElement.prototype.prepend = function(element) {
    if (this.firstChild) {
        return this.insertBefore(element, this.firstChild);
    } else {
        return this.appendChild(element);
    }
};

في المرة القادمة يمكنك القيام بذلك:

document.getElementById('container').prepend(document.getElementById('block'));
// or
var element = document.getElementById('anotherElement');
document.body.prepend(div);

هذه ليست أفضل طريقة لفعل ذلك ، ولكن إذا أراد أي شخص إدراج عنصر قبل كل شيء ، فإليك طريقة.

var newElement = document.createElement("div");
var element = document.getElementById("targetelement");
element.innerHTML = '<div style="display:none !important;"></div>' + element.innerHTML;
var referanceElement = element.children[0];
element.insertBefore(newElement,referanceElement);
element.removeChild(referanceElement);

ربما كنت تسأل عن أساليب DOM appendChild و insertBefore .

parentNode.insertBefore(newChild, refChild)

إدراج عقدة newChild كطفل من parentNode قبل عقدة child التابعة الموجودة refChild . (إرجاع newChild .)

إذا كانت refChild خالية ، تتم إضافة newChild في نهاية قائمة الأطفال. parentNode.appendChild(newChild) ، وأكثر parentNode.appendChild(newChild) ، استخدم parentNode.appendChild(newChild) .


var insertedElement = parentElement.insertBefore(newElement, referenceElement);

إذا كانت referenceElement خالية ، أو غير محددة ، يتم إدراج newElement في نهاية قائمة العقد التابعة.

insertedElement The node being inserted, that is newElement
parentElement The parent of the newly inserted node.
newElement The node to insert.
referenceElement The node before which newElement is inserted.

يمكن العثور على أمثلة هنا: Node.insertBefore





prepend