ฉันจะใช้ส่วนเสริมและผนวกกับ JavaScript ปกติได้อย่างไร

ฉันสามารถใช้ย่อหน้าและผนวกกับปกติ JavaScript โดยไม่ต้องใช้ jQuery?

บางทีคุณอาจกำลังถามเกี่ยวกับวิธีการ DOM และappendChildinsertBefore

parentNode.insertBefore(newChild, refChild)

แทรกโหนดnewChildเป็นเด็กของก่อนที่เด็กโหนดที่มีอยู่parentNode refChild(ส่งคืนnewChild)

หากrefChildเป็นโมฆะnewChildจะมีการเพิ่มที่ส่วนท้ายของรายการลูก ใช้อย่างเท่าเทียมกันและอ่านง่าย parentNode.appendChild(newChild)ขึ้น

นี่เป็นตัวอย่างข้อมูลเพื่อให้คุณไป:

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ก่อนหน้า

คุณไม่ได้ให้อะไรมากกับเราที่นี่ แต่ฉันคิดว่าคุณแค่ถามว่าจะเพิ่มเนื้อหาไปยังจุดเริ่มต้นหรือจุดสิ้นสุดขององค์ประกอบได้อย่างไร ถ้านี่คือวิธีที่คุณสามารถทำได้ง่ายๆ:

//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;

ค่อนข้างง่าย

หากคุณต้องการแทรกสตริง 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>");

การสาธิต

ข้อควรระวัง: ไม่ได้รักษาผู้ฟังว่าที่แนบมาด้วยinsertAdjacentHTML.addEventLisntener

ฉันเพิ่มสิ่งนี้ลงในโครงการและดูเหมือนว่าจะใช้ได้:

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

เพื่อให้ชีวิตของคุณง่ายขึ้นคุณสามารถขยายHTMLElementวัตถุ อาจไม่ทำงานกับเบราว์เซอร์รุ่นเก่า แต่จะทำให้ชีวิตของคุณง่ายขึ้น:

HTMLElement = typeof(HTMLElement) != 'undefined' ? 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);

นี่คือตัวอย่างของการใช้ prepend เพื่อเพิ่มย่อหน้าลงในเอกสาร

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

ผลลัพธ์:

<p>Example text</p>

ในปี 2560ฉันรู้สำหรับ Edge 15 และ IE 12 วิธีการเติมจะไม่รวมอยู่ในคุณสมบัติสำหรับองค์ประกอบ Div แต่ถ้าใครต้องการการอ้างอิงอย่างรวดเร็วเพื่อ polyfill ฟังก์ชั่นที่ฉันทำ:

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

ฟังก์ชั่นลูกศรง่าย ๆ ที่เข้ากันได้กับเบราว์เซอร์ที่ทันสมัยที่สุด

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

คุณยังสามารถใช้ unshift () เพื่อเติมลงในรายการ

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

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