Ahoj! Pomocí JavaScriptu můžete nejen najít prvky na stránce (přečtěte si, jak to udělat), ale také dynamicky vytvářet prvky a přidávat je do DOM. Jak to udělat, bude probráno v této lekci.

Aby bylo možné vytvořit nový prvek na webové stránce - objekt dokumentu má následující metody:

• createElement(elementName) : vytvoří nový prvek, jako parametr musí být předán jakýkoli tag stránky HTML, vrátí prvek HTML
• createTextNode(text) : Vytvoří textový uzel a vrátí jej.

Přidání prvku

Podívejme se na malý příklad:

Var el = document.createElement("div"); var elText = document.createTextNode("Ahoj světe");

Jak můžete vidět z příkladu, proměnná elem bude ukládat odkaz na nový prvek div. Jak však chápete, vytváření prvků nestačí; stále je třeba je přidat na webovou stránku. Když totiž prvky vytváříme tímto způsobem, zdají se být v nějakém virtuálním prostoru nebo v paměti, ale abychom je zobrazili na webové stránce, existují speciální metody.

K přidání prvků na webovou stránku se používají následující metody:

• appendChild(newNode) : přidá nový prvek na konec prvku, na kterém byla tato metoda volána
• insertBefore(newNode, referenceNode) : přidá nový uzel před uzel určený jako druhý parametr.

Podívejme se na příklad připojení prvku k webové stránce pomocí metody appendChild:

Název článku

První odstavec

Druhý odstavec

var clanek = document.querySelector("div.clanek"); // vytvoření prvku var el = document.createElement("h3"); // vytvořte pro něj text var elTxt = document.createTextNode("Ahoj světe"); // přidání textu do prvku jako podřízeného prvku el.appendChild(elTxt); // přidání prvku do bloku div article.appendChild(el);

Příklad vytvořil normální prvek záhlaví h3 a textový uzel. Textový uzel se pak přidá k prvku title. Název se pak přidá k jednomu z prvků webové stránky, aby byl na stránce vidět.

Pro vytvoření textu uvnitř prvku ale vůbec není nutné mít další textový uzel, k tomu je tu vlastnost textContent, která umožňuje přímo přiřadit text k prvku.

Var el = document.createElement("h3"); el.textContent = "Ahoj, já jsem titul";

V tomto případě bude text vytvořen implicitně při přímém nastavení textu.

A podívejme se také na to, jak přidat tento prvek na začátek kolekce podřízených uzlů prvku div:

Var artDiv = document.querySelector("div.článek"); // vytvoření prvku var el = document.createElement("h2"); // vytvořte pro něj text var eltxt = document.createTextNode("Ahoj světe"); // přidání textu do prvku jako podřízeného prvku el.appendChild(eltxt); // získá první prvek, kterému bude předcházet přidání var firstEl = artDiv.firstChild.nextSibling; // přidá prvek do bloku div před první uzel artDiv.insertBefore(el, firstEl);

Pokud náhle potřebujete přidat nový uzel na druhé, třetí nebo jakékoli jiné místo, musíte najít uzel, před který jej musíte vložit, pomocí následujících vlastností firstChild/lastChild nebo nextSibling/previousSibling.

Kopírování prvku

Jsou situace, kdy jsou prvky kompozice poměrně složité a je snazší je kopírovat. K tomu slouží samostatná metoda cloneNode() .

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

Metodě cloneNode() musíte předat booleovskou hodnotu jako parametr: pokud předáte hodnotu true, prvek se zkopíruje spolu se všemi podřízenými uzly; pokud předáte hodnotu false, bude zkopírován bez podřízených uzlů. V v tomto příkladu zkopírujeme prvek spolu s jeho obsahem a přidáme jej na konec webové stránky.

Odebrání prvku

Chcete-li odstranit prvek, musíte zavolat metodu removeChild(). Tato metoda odstraní jeden z podřízených uzlů:

Var artDiv = document.querySelector("div.článek"); // najdeme uzel, který smažeme - první odstavec var removNode = document.querySelectorAll("div.article p"); // odstranění uzlu artDiv.removeChild(removNode);

Tento příklad odstraní první odstavec z bloku div

Výměna prvku

Chcete-li nahradit jeden prvek jiným, použijte metodu replaceChild(newNode, oldNode). Tato metoda bere jako 1. parametr nový prvek, který nahrazuje starý prvek předaný jako 2. parametr.

Var artDiv = document.querySelector("div.článek"); // najdeme uzel, který nahradíme - první odstavec var old = document.querySelectorAll("div.article p"); // vytvoření prvku var new = document.createElement("h3"); // vytvořte pro něj text var elemtxt = document.createTextNode("Ahoj světe"); // přidání textu do prvku jako podřízeného prvku new.appendChild(elemtxt); // nahradí starý uzel novým artDiv.replaceChild(new, old);

V tomto příkladu nahradíme první odstavec nadpisem h2, který jsme právě vytvořili.

VÝSLEDEK.

K vytvoření prvku se používají následující metody:

document.createElement(tag) - vytvoří nový prvek.

document.createTextNode(text) - vytvoří textový uzel

Metody vkládání a odstraňování uzlů

• parent.appendChild(el) - připojí prvek na konec existujícího prvku
• parent.insertBefore(el, nextSibling) - vloží prvek před existující prvek
• parent.removeChild(el) - odebere prvek
• parent.replaceChild(newElem, el) - nahradí jeden prvek jiným
• parent.cloneNode(bool) - zkopíruje prvek, pokud je parametr bool=true, pak se prvek zkopíruje se všemi podřízenými prvky, a pokud je false, pak bez podřízených prvků

Úkoly Funkce vkládání prvků

Napište funkci insertAfter(newEl,oldEl), která vkládá jeden prvek za druhým do samotné funkce, samotné prvky jsou předány jako parametry.

Pokud jste někdy psali JavaScript a museli jste napsat něco jako:
var p = document.createElement("p");
p.appendChild(document.createTextNode("Skutečné rybičky."));
var div = document.createElement("div");
div.setAttribute("id", "nové");
div.appendChild(p);

pak se vám to může hodit.

Problém: Když vytvoříte více než jeden prvek vnořený do sebe, kód se stane velmi složitým.

Nabízím jednoduchý nástroj pro řešení problému - funkci create() (zdrojový kód níže). Vytvořme například odstavec textu:
var el = create("p", ( ), "Sbohem, lásko!");

Nebo div s odstavcem a odkazem uvnitř:
var div = create("div", ( id: "new", style: "background:#fff" ),
create("p", ( zarovnat: "centr" ),
"úvod: ",
create("a", ( href: "ua.fishki.net/picso/kotdavinchi.jpg" ),
"obrázek"),
": konec")
);

Nebo si uděláme tabulku:
var držitel = document.getElementById("držitel2");
var tabulka;
var td;
držitel.appendChild(
stůl =
create("table", (id: "ugly", cols:3),
create("tbody", (),
create("tr", (),
create("td", ( šířka: "10%" ),
"Ahoj"),
td =
create("td", ( style: "background: #fcc" ),
"tam")
create("td", ( Třída: "special2"), "všude")
)
);

Poznámka: 1. IE vyžaduje prvek tbody, jinak odmítne zobrazit tabulku.
2. Atribut class je s něčím v konfliktu, takže jej musíte napsat jako Class. Zdá se, že to na výsledek nemá žádný vliv.
3. table = a tr = v příkladu umožňují uložit vytvořené vnořené objekty pro další práci s nimi.
4. Tento kód funguje v IE, Mozille a Opeře. Funkce samotná funkce create(název, atributy) (
var el = document.createElement(name);
if (typ atributů == "objekt") (
for (var i v atributech) (
el.setAttribute(i, atributy[i]);

If (i.toLowerCase() == "třída") (
el.název třídy = atributy[i]; // pro kompatibilitu s IE

) else if (i.toLowerCase() == "styl") (
el.style.cssText = atributy[i]; // pro kompatibilitu s IE
}
}
}
pro (var i = 2; i< arguments.length; i++) {
var val = argumenty[i];
if (typeof val == "řetězec") ( val = document.createTextNode(val) );
el.appendChild(val);
}
zpětný el;
}

Měli bychom poděkovat Ivanu Kurmanovovi za nápad,
Původní článek s pracovními příklady:

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:

Přidat:

Element.parentNode.insertBefore(newElement, element);

Přidat za:

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

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

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

newElement.appendBefore(prvek);

newElement.appendAfter(prvek);

.appendBefore(element) Prototyp

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

.appendAfter(element)Prototyp

Element.prototype.appendAfter = funkce (prvek) ( element.parentNode.insertBefore(this, element.nextSibling); ),false;

A chcete-li to vidět v akci, spusťte následující fragment kódu

/* Přidá Element BEFORE NeighborElement */ Element.prototype.appendBefore = function(element) ( element.parentNode.insertBefore(this, element); ), false; /* Přidá Element AFTER NeighborElement */ Element.prototype.appendAfter = function(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řidání nového prvku PŘED -NEBO- PO použití výše uvedených prototypů */ NewElement.appendAfter(document.getElementById("Neighbor2")); div ( zarovnání textu: na střed; ) #Neighborhood ( barva: hnědá; ) #NewElement ( barva: zelená; ) Soused 1 Soused 2 Soused 3

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ý referenční uzel, přidá se nový uzel
• Pokud je za referenčním uzlem uzel, přidá se 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(node, referenceNode && referenceNode.nextSibling); return node; );

Jeden obecný příklad

Node.parentNode.insertAfter(newNode, node);

Viz spuštěný kód

// První rozšíření Node.prototype.insertAfter = function(uzel, referenceNode) ( if (uzel) this.insertBefore(node, referenceNode && referenceNode.nextSibling); return node; ); var referenceNode, newNode; newNode = document.createElement("li") newNode.innerText = "První nová položka"; newNode.style.color = "#FF0000"; document.getElementById("no-children").insertAfter(newNode); 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í sourozenci 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 ); // 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(paragraph, refElem);

první odstavec

odstavec dva

Pamatujte, ž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 sami.

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í, aby se vložil malý soubor css

Var raf, cb=function())( //vytvoření nového uzlu var link=document.createElement("link"); link.rel="stylesheet";link.type="text/css";link.href="css / style.css"; //vložit za poslední uzel var nodes=document.getElementsByTagName("link"); //existující uzly var lastnode=document.getElementsByTagName("link"); lastnode.parentNode.insertBefore(link, lastnode. dalšíSourozenec);); //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 na tuto otázku je již příliš mnoho odpovědí, ale žádná z nich nesplňovala mé přesné požadavky.

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

Vzhledem k tomu, že nulový referenční uzel vyžaduje, abyste vložili před nadřazeným uzlem, potřebujeme znát nadřazený uzel - insertBefore je metoda parentNode , takže má tímto způsobem přístup k rodičovskému uzlu; naše funkce neexistuje, 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 = function(newNode, referenceNode) ( this.insertBefore(newNode, referenceNode ? referenceNode.nextSibling: this.firstChild); ); )

node1.after(node2) vytvoří,

kde uzel1 a uzel2 jsou uzly DOM.

V tomto příspěvku vám chci říct, jak přidat nebo odebrat prvek z objektu v JavaScriptu. Je to velmi jednoduché, ale mnoho začátečníků, jako jsem předtím já, se v tom často plete.

Vytvořme objekt například var obj = ( jméno: "alex", prijmeni: "petrov", web: "site", );

Máme jednoduchý objekt, který obsahuje data jako jméno, příjmení a web. Data mohou být naprosto cokoliv, ale pro účely tohoto příspěvku to bude přesně ono.

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

Výše uvedený kód je jasný, ale jen pro objasnění: můžete přidat nové hodnoty k objektu v syntaxi objektu pomocí "." a klíč nebo obvyklý formát pole. Pokud jej deklarujete jako pole, pak je obj stále objektem, protože jste jej dříve takto označili díky () .

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.

Odstranění prvku delete obj.name; // vrátí: true

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

Obj = (); // Znovu vyprázdní objekt

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.

Toto je čtvrtá část příspěvků věnovaná nativním ekvivalentům metod jQuery. Než budete pokračovat, možná si to budete chtít 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í prvků. A přestože jQuery již obsahuje velké množství užitečných metod, budete překvapeni, když zjistíte, že toto vše lze snadno provést pomocí nativních metod.

Manipulace s HTML kódem prvků jQuery // get var html = $(elem).html(); // set $(elem).html("Nové html"); Nativní JS // get var html = elem.innerHTML; // set elem.innerHTML = "Nové html"; Manipulace s textem prvku 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í dokument JS.createElement("div"); Připojí 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(newNode, 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(newNode, referenceNode.nextElementChild); // nebo referenceNode.insertAdjacentElement("afterend", newNode); // FF 48.0+, IE8+

Poznámka: 'beforebegin' a 'afterend' budou fungovat pouze tehdy, pokud je referenční uzel ve stromu DOM a má nadřazený prvek.

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ř prvku, po posledním potomkovi.
  • ‘afterend’ – Po prvku samotném.
• uzel — uzel k vložení

Textový obsah

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

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ý se nachází ve stromu DOM, povede k překreslení. To není moc dobré, protože prohlížeč musí přepočítat velikost a pozici nového prvku, což povede i ke změnám potomků, předků a prvků, které se po něm objeví v DOM. Pokud do DOM přidáváte mnoho prvků, může to chvíli trvat.

Chcete-li se tomu vyhnout, můžete jej 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ískání prvku, 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ý se nachází ve stromu DOM, takže výsledkem bude překreslení každé iterace – to je 100 změn!

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

// Získání prvku, 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 fragmentu dokumentu v paměti, takže přeformátování se spustí, když je fragment přidán do prvku ul. Tato metoda sníží počet překreslení ze 100 na 1.

Odebrání prvku jQuery $(referenceNode).remove(); Nativní JS referenceNode.parentNode.removeChild(referenceNode); // nebo referenceNode.remove(); // FF 23.0+, 23.0+, Edge (bez podpory IE)