Başa eklenen ve normal JavaScript ile nasıl ekleyebilirim?

JQuery kullanmadan normal JavaScript ile başa ekleme ve ekleme işlemini nasıl yapabilirim ?

Belki soruyorsun DOM yöntemlerine appendChild ve insertBefore.

parentNode.insertBefore(newChild, refChild)

Düğümü , varolan alt düğümden önce newChildbir alt öğesi olarak eklerparentNoderefChild . (İade newChild.)

Eğer refChildnull, newChildçocukların listesinin sonunda eklenir. Eşdeğer ve daha okunaklı şekilde kullanın parentNode.appendChild(newChild).

İşte başlamanız için bir pasaj:

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.firstChildbize içindeki ilk öğeye bir referans verir theParentve theKidondan önce koyar .

Bize burada devam etmek için fazla bir şey vermediniz, ama bence sadece bir öğenin başına veya sonuna nasıl içerik ekleyeceğinizi mi soruyorsunuz? Öyleyse, bunu oldukça kolay bir şekilde yapabilirsiniz:

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

Çok kolay.

Ne kadar karmaşık olursa olsun, ham bir HTML dizesi eklemek isterseniz insertAdjacentHTML, uygun ilk argümanla: kullanabilirsiniz :

'beforebegin' Elemanın kendisinden önce. 'afterbegin' Öğenin hemen içinde, ilk çocuğundan önce. 'beforeend' Elemanın içinde, son çocuğundan sonra. 'afterend' Elemanın kendisinden sonra.

İpucu: Eklenecek Element.outerHTMLöğeyi temsil eden HTML dizesini almak için her zaman arayabilirsiniz .

Bir kullanım örneği:

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

DEMO

Dikkat: insertAdjacentHTML bağlı olan dinleyicileri korumaz .addEventLisntener.

Bunu projeme ekledim ve işe yarıyor gibi görünüyor:

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

Misal:

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

Hayatınızı kolaylaştırmak için HTMLElementnesneyi uzatabilirsiniz . Eski tarayıcılar için işe yaramayabilir, ancak kesinlikle hayatınızı kolaylaştırır:

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

Bir dahaki sefere bunu yapabilirsiniz:

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

Aşağıda, belgeye paragraf eklemek için prepend seçeneğine bir örnek verilmiştir.

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

sonuç:

<p>Example text</p>

2017'de Edge 15 ve IE 12 için biliyorum, prepend yöntemi Div öğeleri için bir özellik olarak dahil edilmedi, ancak herkesin bir işlevi çoklu doldurmak için hızlı bir referansa ihtiyacı varsa bunu yaptım:

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

Çoğu modern tarayıcıyla uyumlu basit ok işlevi.

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

ReferenceElement null veya tanımsızsa, newElement, alt düğüm listesinin sonuna eklenir.

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.

Örnekler burada bulunabilir: Node.insertBefore

Listenin başına unshift () yöntemini de kullanabilirsiniz

Bunu yapmanın en iyi yolu bu değildir, ancak herkes her şeyden önce bir öğe eklemek isterse, işte bir yol.

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