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




كود تسجيل الدخول بالجافا سكربت (9)

prepend دون JQuery:

parent.insertBefore(child, parent.firstChild);

تحديث

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

parentNode.prepend(child);

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


إذا كنت تريد إدراج سلسلة 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 .


أنت لم تعطنا الكثير لتذهب إلى هنا ، ولكن أعتقد أنك تسأل فقط كيف تضيف محتوى إلى بداية أو نهاية عنصر؟ إذا كان الأمر كذلك ، فإليك كيفية القيام بذلك بسهولة:

//get the target div you want to append/prepend to
var someDiv = document.getElementById("targetDiv");

//append text
someDiv.innerHTML += "Add this text to the end";

//prepend text
someDiv.innerHTML = "Add this text to the beginning" + someDiv.innerHTML;

سهل جدا.


من أجل تبسيط حياتك ، يمكنك توسيع 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);

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

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 قبله.


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

parentNode.insertBefore(newChild, refChild)

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

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


فيما يلي مثال على استخدام prepend لإضافة فقرة إلى المستند.

var element = document.createElement("p");
var text = document.createTextNode("Example text");
element.appendChild(text);
document.body.prepend(element);

نتيجة:

<p>Example text</p>

في عام 2017 ، أعرف لـ Edge 15 و IE 12 ، لا يتم تضمين طريقة prepend كخاصية لعناصر Div ، ولكن إذا كان أي شخص يحتاج إلى مرجع سريع إلى polyfill دالة قمت بها:

 HTMLDivElement.prototype.prepend = (node, ele)=>{ 
               try { node.insertBefore(ele ,node.children[0]);} 
                     catch (e){ throw new Error(e.toString()) } }

وظيفة السهم البسيطة التي تتوافق مع معظم المتصفحات الحديثة.


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

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>`);




prepend