Dynamické vytváření html třídy div z javascriptu. JavaScript: vytváření fragmentů DOM

Toto je čtvrtá část blogového příspěvku týkajícího se ekvivalentů nativní metody jQuery. Než budete pokračovat, můžete si jej přečíst.

V tomto článku se podíváme na způsoby vytváření, vkládání, přesouvání a odstraňování položek. Přestože jQuery již obsahuje velké množství užitečných metod, budete překvapeni, že to vše lze snadno provést pomocí nativních metod.

Manipulace s HTML kódem prvků

jQuery

// get var html = $ (elem) .html (); // nastavit $ (elem) .html (" ");

Nativní JS

// get var html = elem.innerHTML; // set elem.innerHTML = " ";

Manipulace s textem prvků

jQuery

// get var text = $ (elem) .text (); // set $ (elem) .text ("Nový text");

Nativní JS

// get var text = elem.textContent; // set elem.textContent = "Nový text";

Vytvoření prvku

jQuery

$("");

Nativní JS

document.createElement ("div");

Přidá obsah na konec prvků

jQuery

$ (parentNode) .append (newNode);

Nativní JS

parentNode.appendChild (newNode);

Přidá obsah na začátek prvků

jQuery

$ (referenceNode) .prepend (newNode);

Nativní JS

referenceNode.insertBefore (novýUzel, referenceNode.firstElementChild); // nebo referenceNode.insertAdjacentElement ("afterbegin", newNode); // FF 48.0+, IE8+

Vložit přímo před prvek

jQuery

$ (referenceNode) .before (newNode);

Nativní JS

referenceNode.parentNode.insertBefore (newNode, referenceNode); // nebo referenceNode.insertAdjacentElement ("beforebegin", newNode); // FF 48.0+, IE8+

Vložit přímo za prvek

jQuery

$ (referenceNode) .after (newNode);

Nativní JS

referenceNode.parentNode.insertBefore (novýUzel, referenceNode.nextElementChild); // nebo referenceNode.insertAdjacentElement ("afterend", newNode); // FF 48.0+, IE8+

Poznámka: 'beforebegin' a 'afterend' budou fungovat pouze tehdy, když je referenční uzel ve stromu DOM a má rodiče.

Podívejte se na následující:

ReferenceNode.insertAdjacentElement (pozice, uzel);

Metoda insertAdjacentElement má dva parametry:

• position – pozice vzhledem k referenčnímu uzlu, musí být jedna z následujících:
  • 'Beforebegin' - Před samotným prvkem.
  • 'Afterbegin' - Uvnitř živlu, před prvním dítětem.
  • 'Beforeend' - Uvnitř elementu, po posledním dítěti.
  • 'Afterend' - Po samotném prvku.
• uzel – uzel, který se má vložit

var elem1 = document.getElementById ("elem1"); var elem2 = document.getElementById ("elem2"); elem1.insertAdjacentElement ("před", elem2); // výsledek

Metoda insertAdjacentElement je čistší a intuitivnější než metoda insertBefore, ale tato metoda je lépe podporována ve starších prohlížečích.

Vícenásobné přidávání prvků

Za zmínku také stojí, že přidání prvku do uzlu, který je ve stromu DOM, povede k překreslení. To není dobré, protože prohlížeč musí přepočítat velikost a pozici nového prvku, čímž se změní i potomci, předci a prvky, které se po něm objeví v DOM. Pokud do DOM přidáváte mnoho prvků, může to chvíli trvat.

Abyste tomu zabránili, můžete přidat pomocí DocumentFragment. Fragment dokumentu je objekt dokumentu, který existuje pouze v paměti, takže jeho přidání nezpůsobí žádné přeformátování.

Řekněme, že potřebujeme přidat 100 li prvků k prvku ul, který je přítomen ve stromu DOM:

// Získejte prvek, který bude obsahovat naše položky var ul = document.querySelector ("ul"); // vytvořte 100 prvků seznamu pro (var i = 1; i< 100; i++) { var li = document.createElement("li"); // append the new list element to the ul element ul.appendChild(li); }

Ve výše uvedeném příkladu jsou prvky li přidány přímo do prvku ul, který je ve stromu DOM, proto povede k překreslení při každé iteraci – to je 100 změn!

Pojďme najít lepší způsob.

// Získejte prvek, který bude obsahovat naše položky var ul = document.querySelector ("ul"); // vytvořte fragment dokumentu pro připojení prvků seznamu k var docFrag = document.createDocumentFragment (); // vytvořte 100 prvků seznamu pro (var i = 1; i< 100; i++) { var li = document.createElement("li"); // append the new list element to the fragment docFrag.appendChild(li); } // append the fragment to the ul element ul.appendChild(docFrag);

Ve stejném příkladu jsou prvky li přidány do části dokumentu v paměti, takže přeformátování bude fungovat, když se část přidá do prvku ul. Tato metoda sníží počet překreslení ze 100 na 1.

Odebrání položky

jQuery

$ (referenceNode) .remove ();

Nativní JS

referenceNode.parentNode.removeChild (referenceNode); // nebo referenceNode.remove (); // FF 23.0+, 23.0+, Edge (bez podpory IE)

odstranit prvek js (12)

Krok 1. Připravte si prvky:

var element = document.getElementById ("ElementToAppendAfter"); var newElement = document.createElement ("div"); var elementParent = element.parentNode;

Krok 2. Přidejte za:

elementParent.insertBefore (newElement, element.nextSibling);

JavaScript má insertBefore (), ale jak mohu vložit prvek po jiný prvek bez použití jQuery nebo jiné knihovny?

Přímý JavaScript by byl následující:

Přidat:

Element.parentNode.insertBefore (newElement, element);

Přidat za:

Element.parentNode.insertBefore (newElement, element.nextSibling);

Ale pro snadné použití tam hoďte nějaké prototypy

Vytvořením následujících prototypů můžete tuto funkci volat přímo z nově vytvořených prvků.

newElement.appendBefore (prvek);

newElement.appendAfter (prvek);

.appendBefore (prvek) Prototyp

Element.prototype.appendBefore = funkce (prvek) (element.parentNode.insertBefore (tento, prvek);), false;

.appendAfter (prvek) Prototyp

Element.prototype.appendAfter = funkce (prvek) (element.parentNode.insertBefore (toto, prvek.dalsiSourozenec);), false;

A abyste viděli vše v akci, spusťte následující fragment kódu

/ * Přidá prvek BEFORE NeighborElement * / Element.prototype.appendBefore = funkce (prvek) (element.parentNode.insertBefore (tento, prvek);), false; / * Přidá Element AFTER NeighborElement * / Element.prototype.appendAfter = funkce (element) (element.parentNode.insertBefore (this, element.nextSibling);), false; / * Typické vytvoření a nastavení nového objektu osamoceného prvku * / var NewElement = document.createElement ("div"); NewElement.innerHTML = "Nový prvek"; NewElement.id = "NewElement"; / * Přidat NewElement PŘED -NEBO- AFTER pomocí výše uvedených prototypů * / NewElement.appendAfter (document.getElementById ("Neighbor2")); div (text-align: center;) #Neighborhood (color: brown;) #NewElement (color: green;)

V ideálním případě by insertAfter měl fungovat podobně jako MDN. Níže uvedený kód provede následující:

• Pokud neexistují žádné potomky, je přidán nový uzel
• Pokud neexistuje žádný odkazovaný uzel, přidá se nový uzel
• Pokud za odkazovaný uzel uzlu bude přidán nový uzel
• Pokud má potom odkazovaný uzel potomky, pak se nový uzel vloží před tohoto sourozence
• Vrátí nový uzel

Rozšíření uzlu

Node.prototype.insertAfter = function (uzel, referenceNode) (if (uzel) this.insertBefore (uzel, referenceNode && referenceNode.nextSibling); return node;);

Jeden běžný příklad

Node.parentNode.insertAfter (novýUzel, uzel);

Viz Spouštění kódu

// First extend Node.prototype.insertAfter = function (uzel, referenceNode) (if (uzel) this.insertBefore (uzel, referenceNode && referenceNode.nextSibling); return node;); var referenceNode, newNode; newNode = document.createElement ("li") newNode.innerText = "První nová položka"; newNode.style.color = "# FF0000"; document.getElementById ("žádné děti"). insertAfter (novýUzel); newNode = document.createElement ("li"); newNode.innerText = "Druhá nová položka"; newNode.style.color = "# FF0000"; document.getElementById ("no-reference-node"). insertAfter (newNode); referenceNode = document.getElementById ("no-sibling-after"); newNode = document.createElement ("li"); newNode.innerText = "Třetí nová položka"; newNode.style.color = "# FF0000"; referenceNode.parentNode.insertAfter (newNode, referenceNode); referenceNode = document.getElementById ("sibling-after"); newNode = document.createElement ("li"); newNode.innerText = "Čtvrtá nová položka"; newNode.style.color = "# FF0000"; referenceNode.parentNode.insertAfter (newNode, referenceNode);

Žádné děti

Žádný referenční uzel

• První položka

Žádný sourozenec po

• První položka

Sourozenec po

• První položka
• Třetí položka

Metoda insertBefore () se používá jako parentNode.insertBefore (). Abychom to emulovali a vytvořili metodu parentNode.insertAfter (), můžeme napsat následující kód.

Node.prototype.insertAfter = function (newNode, referenceNode) (return referenceNode.parentNode.insertBefore (newNode, referenceNode.nextSibling); // na základě řešení karim79 "s); // získání požadovaných ovladačů var refElem = document.getElementById (" pTwo "); var parent = refElem.parentNode; // vytváření

odstavec třetí

var txt = document.createTextNode ("odstavec tři"); var odstavec = document.createElement ("p"); odstavec.appendChild (txt); // nyní to můžeme nazvat stejným způsobem jako insertBefore () parent.insertAfter (odstavec, refElem);

Upozorňujeme, že rozšíření DOM pro vás nemusí být tím správným řešením, jak je uvedeno v tomto článku.

Tento článek byl napsán v roce 2010 a nyní může být vše jinak. Tak se rozhodněte vy.

Umožňuje zvládnout všechny scénáře

Funkce insertAfter (newNode, referenceNode) (if (referenceNode && referenceNode.nextSibling && referenceNode.nextSibling.nodeName == "#text") referenceNode = referenceNode.nextSibling; if (! ReferenceNode) document.body.appendChild (newNode); jinak pokud (! referenceNode.nextSibling) document.body.appendChild (newNode); jinak referenceNode.parentNode.insertBefore (newNode, referenceNode.nextSibling);)

Tento kód funguje tak, že vloží prvek odkazu hned za poslední existující podřízené vložení do vložení malého souboru css

Var raf, cb = function () (// vytvořit nový uzel var link = document.createElement ("odkaz"); link.rel = "stylesheet"; link.type = "text / css"; link.href = "css / style.css "; // vložit za poslední uzel var nodes = document.getElementsByTagName (" odkaz "); // existující uzly var lastnode = document.getElementsByTagName (" odkaz "); lastnode.parentNode.insertBefore (odkaz, lastnode.nextSibling ;)); // kontrola před vložením try (raf = requestAnimationFrame || mozRequestAnimationFrame || webkitRequestAnimationFrame || msRequestAnimationFrame;) catch (err) (raf = false;) if (raf) raf (cb); else window.addEventListener ("načíst", cb);

Vím, že tato otázka má již příliš mnoho odpovědí, ale žádná z nich nesplnila mé přesné požadavky.

Potřebuji funkci, která má přesně opačné chování než parentNode.insertBefore- to znamená, že musí přijmout nulový referenční uzel (který není v odpovědi přijat) a kam se insertBefore vloží do konec insertPřed kterým se má vložit začátek, protože jinak by nebylo možné vkládat na původní místo s touto funkcí vůbec; ze stejného důvodu insertBefore vloží na konec.

Protože null referenceNode vyžaduje, abyste vložiliBefore nadřazeného, ​​potřebujeme znát nadřazeného – insertBefore je metoda parentNode, takže může tímto způsobem přistupovat k nadřazenému rodičovskému uzlu; naše funkce tam není, takže musíme předat rodičovský prvek jako parametr.

Výsledná funkce vypadá takto:

Funkce insertAfter (parentNode, newNode, referenceNode) (parentNode.insertBefore (newNode, referenceNode? ReferenceNode.nextSibling: parentNode.firstChild);)

If (! Node.prototype.insertAfter) (Node.prototype.insertAfter = funkce (newNode, referenceNode) (this.insertBefore (newNode, referenceNode? ReferenceNode.nextSibling: this.firstChild););)

node1.after (uzel2) vytvoří ,

kde uzel1 a uzel2 jsou uzly DOM.

Pokud potřebujete vytvořit HTML element a nevíte, jak jej implementovat, pak jste na správném místě. Tento článek bude nejen zvažovat příklad vytvoření prvku, ale také napsat univerzální funkci, pomocí které můžete vytvořit nový prvek, přidat k němu různé atributy a vyplnit jej textem.

Ale pro začátek začněme s jednoduchým. Při vytváření nového prvku použijeme metody objektu DOM, a to:

* document.createElement (param) - tato metoda slouží přímo k vytvoření prvku. Jako parametr převezme název prvku, který se má vytvořit. Vrátí odkaz na vytvořený prvek.

document.createElement („div“); // vytvoří prvek div.

* document.appendChild (param) - tato metoda se používá pro přidání prvku do HTML kódu. Jako parametr bere odkaz na vytvořený prvek;

var parent = document.getElementsByTagName ("BODY"); // získat odkaz na element body

var elem = document.createElement (‚div‘); // vytvoří prvek div

parent.appendChild (elem); // přidá prvek, kde parent je odkaz, kam bude náš prvek přidán, do v tomto případě- toto je tělo tělo;

* document.createTextNode () - metoda se používá pro umístění textu do prvku.

Příklad vytvoření prvku.

funkce createElem () (

Var newP = document.createElement ("p");

NewP.className = "elemClass";

NewP.id = "myPId";

NewP.style.width = "100px";

NewP.style.height = "300px";

NewP.style.background = "# c5c5c5";

NewP.style.color = "# 000";

Var text = "text k vložení";

Var textNode = document.createTextNode (text);

NewP.appendChild (textNode);

Parent.appendChild (novéP);

Ve funkci createElem je rodičovská proměnná odkazem na prvek (tělo), do kterého bude nový prvek umístěn. Poté se vytvoří nový prvek P, přidají se k němu atributy id, class, style a nastaví se hodnoty těchto atributů. Poté se vytvoří textový uzel a přidá se k našemu novému prvku. Po tom všem se do těla těla přidá samotný prvek. Chcete-li udělat nemocný počet nových prvků, budete muset tvrdě pracovat, tk. možná je budete muset umístit na různá místa na webové stránce, tzn. připojit k různým prvkům.

Příklad vytvoření prvku pomocí obecné funkce.

Tato funkce vám pomůže vytvořit nový prvek, přidat k němu různé atributy, připojit k němu textový uzel, umístit jej před nebo za určený prvek nebo nahradit prvek nově vytvořeným prvkem. Je vyžadován pouze argument názvu.

function createElement (název, attrs, styl, text, minulé_id, pozice, změněno) (

Var parent = document.getElementsByTagName ("BODY");

Var e = document.createElement (název);

Pokud (attrs) (

Pro (zadejte attrs) (

If (klíč == "třída") (

E.název třídy = attrs;

) else if (key == "id") (

E.id = attrs;

) jinak (

E.setAttribute (klíč, attrs);

Pokud (styl) (

Pro (klíč ve stylu) (

E.style = styl;

Pokud (text) (

E.appendChild (document.createTextNode (text));

Parent.appendChild (e);

If (minulé_id) (

Var old_elem = document.getElementById (minulé_id);

If (pozice == "před") (

Parent.insertBefore (e, old_elem)

) else if (pozice == "po") (

InsertAfter (rodič, e, starý_elem);

If (změněno! = "" && změněno == pravda) (

Parent.removeChild (starý_elem);

Možnosti:

Název – název prvku;

Attrs - atributy vytvářeného prvku;

Styl - styly vytvářeného prvku;

Text - vložený text;

Past_id - id prvku, vedle kterého bude náš prvek umístěn;

Pozice - může nabývat dvou hodnot před, po;

Změněno - příznak, který přijímá dvě hodnoty true nebo false. Pokud je tento parametr nastaven na hodnotu true, bude starý prvek nahrazen novým;

Jako příklad vytvoříme prvek DIV s atributy a nahradíme starý prvek nově vytvořeným prvkem.

createElement ("div",

("class": "myDivCSSClass", "id": "myDivId", "align": "center"),

("width": "200px", "height": "250px", "background": "# 3B9D00", "color": "#fff"),

"tady je můj text",

"test",

"před",

V tomto příspěvku vám chci ukázat, jak přidat nebo odebrat prvek z objektu v JavaScriptu. Je to velmi jednoduché, ale mnoho nováčků, jako jsem předtím já, v tom často zmátlo.

Vytvořme vzorový objekt

var obj = (jméno: "alex", příjmení: "petrov", webové stránky: "site",);

Máme jednoduchý objekt, uvnitř kterého máme data jako jméno (křestní jméno), last_name (příjmení) a web (web). Data mohou být naprosto jakákoli, ale pro účely tohoto záznamu to tak bude.

Přidávání nové položky

obj.country = "ru"; // přidat nový klíč"země" do objektu s hodnotou "ru" obj ["město"] = "Moskva"; // také přidá nový klíč, pouze "město" s hodnotou "Moskva"

Ve výše uvedeném kódu je vše jasné, ale pro upřesnění: nové hodnoty můžete přidat k objektu v syntaxi objektu pomocí "." a formát klíče nebo běžného pole. Pokud deklarujete jako pole, pak je obj stále objektem, jak jste jej dříve označili pomocí ().

Vytvořte objekt uvnitř objektu

obj.other_obj = (); // vytvoří novou hodnotu other_obj v obj a udělá z ní objekt

Nyní tam přidáme nějaká data:

Obj.other_obj.first = "první klíč nového objektu"; obj.other_obj.second = "druhý";

Vytvořili jsme dvě nové hodnoty, první a druhou, uvnitř other_obj.

Odebrání položky

delete obj.name; // vrátí: true

Můžete použít delete, které může odstranit prvky z objektů. Celý objekt nelze tímto způsobem smazat, ale pokud to potřebujete, můžete to udělat:

Obj = (); // Udělejte objekt znovu prázdný

To je vše, pokud máte stále nějaké dotazy ohledně objektů v JavaScriptu, napište komentář níže, pokusím se vám pomoci.

Poslední aktualizace: 1.11.2015

Objekt dokumentu má následující metody vytváření prvků:

createElement (elementName): Vytvoří prvek html se značkou předanou jako parametr. Vrátí vytvořenou položku

createTextNode (text): Vytvoří a vrátí textový uzel. Jako parametr je předán text uzlu.

var elem = document.createElement ("div"); var elemText = document.createTextNode ("Ahoj světe");

Proměnná elem tedy bude obsahovat odkaz na prvek div. Samotné vytvoření prvků však nestačí, je třeba je ještě přidat na webovou stránku.

Pro přidání prvků můžeme použít jednu z metod objektu Node:

appendChild (newNode): Přidá nový uzel newNode na konec kolekce podřízených uzlů

insertBefore (newNode, referenceNode): přidá nový uzel newNode před referenceNode

Použijme metodu appendChild:

Nejprve vytvoříme běžný prvek nadpisu h2 a textový uzel. Poté přidejte textový uzel do prvku záhlaví. Poté přidejte název k jednomu z prvků webové stránky:

Nemusíme však vytvářet další textový uzel k definování textu v prvku, protože můžeme použít vlastnost textContent a text k němu přímo přiřadit:

Var elem = document.createElement ("h2"); elem.textContent = "Ahoj světe";

V tomto případě se textový uzel vytvoří implicitně při nastavování textu.

Nyní se podívejme, jak přidat podobný prvek na začátek kolekce podřízených uzlů bloku div:

Var articleDiv = document.querySelector ("div.článek"); // vytvoření prvku var elem = document.createElement ("h2"); // vytvořte pro něj text var elemText = document.createTextNode ("Ahoj světe"); // přidání textu do prvku jako potomka elem.appendChild (elemText); // získání prvního prvku, kterému předchází přidání var firstElem = articleDiv.firstChild.nextSibling; // přidání prvku do div před prvním uzlem articleDiv.insertBefore (elem, firstElem);

Pokud potřebujeme vložit nový uzel na druhé, třetí nebo jakékoli jiné místo, pak musíme pomocí kombinací vlastností firstChild / lastChild a nextSibling / previousSibling najít uzel, před který musíme vložit.

Kopírování položky

Někdy mají prvky poměrně složitou kompozici a je mnohem snazší je zkopírovat než pomocí samostatných volání vytvářet z obsahu. Chcete-li zkopírovat existující uzly z objektu Node, můžete použít metodu cloneNode ():

Var articleDiv = document.querySelector ("div.článek"); // klonování elementu articleDiv var newArticleDiv = articleDiv.cloneNode (true); // přidat na konec prvku těla document.body.appendChild (newArticleDiv);

Logická hodnota je předána metodě cloneNode () jako parametr: pokud je předáno true, pak bude prvek zkopírován se všemi podřízenými uzly; pokud je předán false, je zkopírován bez podřízených uzlů. To znamená, že v tomto případě zkopírujeme uzel s celým jeho obsahem a poté jej přidáme na konec prvku body.

Odebrání položky

K odstranění prvku se volá metoda removeChild () objektu Node. Tato metoda odstraní jeden z podřízených uzlů:

Var articleDiv = document.querySelector ("div.článek"); // najděte uzel, který má být odstraněn - první odstavec var removeNode = document.querySelectorAll ("div.article p"); // odstranění uzlu articleDiv.removeChild (removableNode);

Tím se odstraní první odstavec z div.

Výměna prvku

Chcete-li nahradit prvek, použijte metodu nahraditChild (newNode, oldNode) Uzel. Tato metoda bere jako první parametr nový prvek, který nahrazuje starý prvek oldNode předaný jako druhý parametr.

Var articleDiv = document.querySelector ("div.článek"); // najděte uzel, který chcete nahradit - první odstavec var oldNode = document.querySelectorAll ("div.article p"); // vytvoření prvku var newNode = document.createElement ("h2"); // vytvořte pro něj text var elemText = document.createTextNode ("Ahoj světe"); // přidání textu do prvku jako podřízeného newNode.appendChild (elemText); // nahraďte starý uzel novým articleDiv.replaceChild (newNode, oldNode);

V tomto případě nahradíme první odstavec nadpisem h2.