Làm cách nào tôi có thể triển khai trả trước và nối thêm với JavaScript thông thường?

Làm cách nào tôi có thể triển khai trả trước và nối thêm với JavaScript thông thường mà không cần sử dụng jQuery?

Có lẽ bạn đang hỏi về các phương thức DOM appendChild và insertBefore.

parentNode.insertBefore(newChild, refChild)

Chèn nút newChildlà con của parentNodetrước nút con hiện có refChild. (Trả về newChild.)

Nếu refChildlà null, newChildđược thêm vào cuối danh sách trẻ em. Tương đương, và dễ đọc hơn, sử dụng parentNode.appendChild(newChild).

Đây là một đoạn để giúp bạn đi:

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.firstChildsẽ cho chúng ta một tham chiếu đến phần tử đầu tiên bên trong theParentvà đặt theKidtrước nó.

Bạn đã không cho chúng tôi nhiều thứ để tiếp tục ở đây, nhưng tôi nghĩ bạn chỉ hỏi làm thế nào để thêm nội dung vào đầu hoặc cuối của một yếu tố? Nếu vậy đây là cách bạn có thể làm điều đó khá dễ dàng:

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

Khá dễ.

Nếu bạn muốn chèn một chuỗi HTML thô cho dù phức tạp đến đâu, bạn có thể sử dụng : insertAdjacentHTML, với đối số đầu tiên phù hợp:

'beforebegin' Trước chính phần tử. 'afterbegin' Ngay bên trong phần tử, trước đứa con đầu tiên của nó. 'trước đó' Chỉ bên trong phần tử, sau đứa con cuối cùng của nó. 'afterend' Sau phần tử chính nó.

Gợi ý: bạn luôn có thể gọi Element.outerHTMLđể lấy chuỗi HTML đại diện cho phần tử được chèn.

Một ví dụ về cách sử dụng:

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

BẢN GIỚI THIỆU

Chú ý: insertAdjacentHTML không bảo tồn người nghe mà gắn liền với .addEventLisntener.

Tôi đã thêm điều này vào dự án của tôi và nó dường như hoạt động:

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

Thí dụ:

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

Để đơn giản hóa cuộc sống của bạn, bạn có thể mở rộng HTMLElementđối tượng. Nó có thể không hoạt động cho các trình duyệt cũ hơn, nhưng chắc chắn làm cho cuộc sống của bạn dễ dàng hơn:

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

Vì vậy, lần tới bạn có thể làm điều này:

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

Đây là một ví dụ về việc sử dụng trả trước để thêm một đoạn vào tài liệu.

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

kết quả:

<p>Example text</p>

Vào năm 2017 tôi biết cho Edge 15 và IE 12, phương thức trả trước không được bao gồm như một thuộc tính cho các phần tử Div, nhưng nếu có ai cần tham khảo nhanh về polyfill một chức năng tôi đã thực hiện:

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

Chức năng mũi tên đơn giản tương thích với hầu hết các trình duyệt hiện đại.

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

Nếu ReferenceEuity là null hoặc không xác định, newEuity được chèn vào cuối danh sách các nút con.

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.

Ví dụ có thể được tìm thấy ở đây: Node.insertB Before

Bạn cũng có thể sử dụng unshift () để thêm vào danh sách

Đây không phải là cách tốt nhất để làm điều đó nhưng nếu bất cứ ai muốn chèn một yếu tố trước mọi thứ, đây là một cách.

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