JavaScript: Jak přidat nový prvek do objektu? JavaScript: Vytváření fragmentů DOM Javascript Přidání prvku

Poslední aktualizace: 1.11.2015

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

createElement(elementName) : Vytvoří prvek html, jehož tag je předán jako parametr. Vrátí vytvořený prvek

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

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

Takže proměnná elem bude ukládat odkaz na prvek div. Pouhé vytváření prvků však nestačí, je třeba je na webovou stránku ještě přidat.

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 uzel referenceNode

Používáme metodu appendChild:

Název článku

První odstavec

Druhý odstavec

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

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

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

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

Nyní zvažte, 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ý má být přidán před 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, musíme najít uzel, před který chceme vložit, pomocí kombinace vlastností firstChild/lastChild a nextSibling/previousSibling.

Kopírování prvku

Někdy mají prvky poměrně složité složení a je mnohem snazší je kopírovat, než vytvářet obsah ze samostatných volání. 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řipojit 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, pak se zkopíruje 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í prvku

K odstranění prvku se zavolá 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);

V tomto případě je z bloku div odstraněn první odstavec.

Výměna prvku

Metoda se používá k nahrazení prvku. nahraditChild(novýUzel, starýUzel) objektový 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("Hello World"); // 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ě nahraďte první odstavec nadpisem h2.

V této lekci se naučíme, jak vytvořit uzly prvků (createElement) a textové uzly (createTextNode). A také zvažte metody pro přidávání uzlů do stromu (appendChild , insertBefore) a pro odstraňování uzlů ze stromu (removeChild).

Přidávání uzlů do stromu

Přidání nového uzlu do stromu se obvykle provádí ve 2 krocích:

Vytvořte požadovaný uzel pomocí jedné z následujících metod:

createElement() - vytvoří prvek (uzel) se zadaným názvem (tag). Metoda createElement(element) má jeden povinný parametr (element), což je řetězec obsahující název prvku (tagu), který má být vytvořen. Název prvku (tagu) v parametru musí být uveden velkými písmeny. Výsledkem je, že tato metoda vrátí prvek, který byl vytvořen.
createTextNode() - vytvoří textový uzel se zadaným textem. Metoda createTextNode(text) má jeden povinný parametr (text), kterým je řetězec obsahující text textového uzlu. Výsledkem je, že tato metoda vrátí textový uzel, který byl vytvořen.

Určete umístění ve stromu, kam chcete vložit uzel. Chcete-li to provést, použijte jednu z následujících metod:

appendChild() - Přidá uzel jako poslední podřízený uzel prvku, na kterém je tato metoda volána. Metoda appendChild(node) má jeden povinný parametr, uzel, který chcete přidat. Výsledkem je, že tato metoda vrátí přidaný uzel.
insertBefore() - Vloží uzel jako podřízený uzel prvku, na kterém je tato metoda volána. Metoda insertBefore(newNode,existingNode) má dva parametry: newNode (povinné) - uzel, který chcete přidat, existujícíUzel (volitelné) - podřízený uzel prvku, před který chcete uzel vložit. Pokud není zadán druhý parametr (existingNode), tak jej tato metoda vloží na konec, tzn. jako poslední podřízený uzel prvku, na kterém je tato metoda volána. Metoda insertBefore() jako výsledek vrátí vložený uzel.

Například:

Počítač
Přenosný počítač
Tableta

Podívejme se na složitější příklad, kdy do stromu přidáme uzel LI obsahující textový uzel s textem „Smartphone“ na konci seznamu ul.

Chcete-li to provést, postupujte takto:

Vytvořte prvek (uzel) LI .
Vytvořte textový uzel obsahující text "Smartphone".
Přidejte nově vytvořený textový uzel jako poslední podřízený uzel nově vytvořeného prvku LI
Přidejte nově vytvořený uzel LI jako poslední podřízený uzel prvku ul

//vytvoření prvku (uzlu) li var elementLI = document.createElement("li"); //vytvoří textový uzel obsahující text "Smartphone" var textSmart= document.createTextNode("Smartphone"); //připojí vytvořený textový uzel jako posledního potomka nově vytvořeného prvku LI elementLI.appendChild(textSmart); //získání prvku, ke kterému bude vytvořený uzel li přidán jako podřízený var elementUL = document.getElementById("list"); //připojí vytvořený prvek li jako poslední podřízený prvek k UL pomocí id="list" elementUL.appendChild(elementLI);

appendChild() a insertBefore() při práci s existujícími uzly

Práce s existujícími uzly pomocí metod appendChild() a insertBefore() se také provádí ve 2 fázích:

Získejte existující uzel ve stromu.
Pomocí metody appendChild() nebo insertBefore() určete, kam se má uzel vložit. Tím se uzel odstraní z jeho předchozího umístění.

Například přidejte existující prvek li obsahující text „Tablet“ na začátek seznamu (tím jej odstraníte z předchozí pozice):

//získání prvku UL obsahujícího seznam podle jeho id var elementUL = document.getElementById("list"); //získání elementu li obsahujícího textový uzel "Tablet" var elementLI = elementUL.childNodes; //přidejte prvek na začátek seznamu //tím se odstraní z jeho původního umístění elementUL.insertBefore(elementLI,elementUL.firstChild);

Cvičení

V dokumentu jsou dva seznamy. Musíte přesunout prvky z druhého seznamu do prvního.
Vytvořte seznam, textové pole a 2 tlačítka. Napište kód JavaScript, který v závislosti na stisknutém tlačítku přidá text v textovém poli na začátek nebo konec seznamu.

Odstranění uzlů

Odstranění uzlu ze stromu se provádí ve 2 fázích:

Získejte (najděte) tento uzel ve stromu. Tato akce se obvykle provádí jednou z následujících metod: getElementById() , getElementsByClassName() , getElementsByTagName() , getElementsByName() , querySelector() nebo querySelectorAll() .
Zavolejte metodu removeChild() na nadřazeném uzlu a jako parametr předejte uzel, který z něj chceme odstranit.
Metoda removeChild() vrátí odstraněný uzel jako jeho hodnotu nebo hodnotu null, pokud uzel, který jsme chtěli odstranit, neexistoval.

//najdeme uzel, který chceme smazat var findElement = document.getElementById("notebook"); //zavolá metodu removeChild na nadřazeném uzlu //a předá jí nalezený uzel jako parametr findElement.parentNode.removeChild(findElement);

Odeberte například posledního potomka prvku s id="myID" :

//získání prvku s id="myID" var mojeID = document.getElementById("mojeID"); //získáte poslední podřízený uzel prvku mojeID var lastNode = mojeID.lastChild; //protože nevíme, zda je posledním podřízeným uzlem prvku prvek, //použijte cyklus while k nalezení posledního potomka prvku mojeID //pokud prvek má uzel a jeho typ není roven 1 (tj. není to prvek) vykonat while (lastNode && lastNode.nodeType!=1) ( //přejít na předchozí uzel lastNode = lastNode.previousSibling; ) //pokud jsme našli prvek v uzlu mojeID if (lastNode) ( // pak musí být odstraněn lastNode.parentNode.removeChild( lastNode); )

Odeberte například všechny podřízené uzly z prvku s id="myQuestion" :

//získáme prvek, který chceme odstranit všechny jeho podřízené uzly var elementQuestion = document.getElementById("myQuestion"); //když existuje první prvek while (elementQuestion.firstElement) ( //odstraňte jej elementQuestion.removeChild(element.firstChild); )

Cvičení

Napište funkci, která odstraní všechny textové uzly z prvku.
Existují 2 seznamy (), napište kód JavaScript, který odstraní všechny prvky ze seznamů 1 a 2.

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

Chcete-li vytvořit nový prvek na webové stránce, má objekt dokumentu 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

Zvažte malý příklad:

Varel = 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 víte, vytváření prvků nestačí, protože je stále třeba 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 zadaný 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

V příkladu byl vytvořen běžný prvek nadpisu h3 a textový uzel. Textový uzel je pak přidán do prvku záhlaví. Poté je název přidán k jednomu z prvků webové stránky, aby byl na stránce vidět.

K vytvoření textu uvnitř prvku však není nutné mít další textový uzel, k tomu existuje vlastnost textContent, která umožňuje přímo přiřadit text k prvku.

Var el = document.createElement("h3"); el.textContent = "Dobrý den, jmenuji se";

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 do horní části kolekce podřízených uzlů prvku div:

VarartDiv = document.querySelector("div.článek"); // vytvoření prvku var el = document. createElement("h2"); // vytvořte pro něj text var eltxt = document. createTextNode("Hello World"); // přidání textu do prvku jako potomka el.appendChild(eltxt); // získání prvního prvku, který má být přidán před var firstEl = artDiv.firstChild.nextSibling; // přidání prvku do prvku 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 skutečně potřebujete 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 se používá samostatná metoda cloneNode().

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

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

Odebrání prvku

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

VarartDiv = document.querySelector("div.článek"); // najděte uzel, který má být odstraněn - 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.

VarartDiv = document.querySelector("div.článek"); // najděte uzel, který chcete nahradit - 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 new.appendChild(elemtxt); // nahradí starý uzel novým artDiv.replaceChild(new, old);

V tomto příkladu nahradíme první odstavec nově vytvořeným nadpisem h2.

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 odebírání uzlů

parent.appendChild(el)- přidá prvek na konec existujícího prvku
parent.insertBefore(el, nextSibling)- vloží prvek před existující prvek
parent.removeChild(el)- odstraní prvek
parent.replaceChild(newElem, el)- nahrazuje 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 pro 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.

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 (prvek) Prototyp

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

.appendAfter (prvek) Prototyp

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

A abyste viděli vše 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 za referenčním uzlem Node , je přidán nový uzel
Pokud má potom referenční 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 běžný 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ý 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 ); // 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

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ř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.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 již obsahuje 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í než parentNode.insertBefore- tj. musí přijmout nulový referenční uzel (který není přijat jako odpověď) a kam se insertBefore vloží do konec insertPřed kterým se má vložit brzy, protože jinak by nebylo možné vložit 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á 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.

Pokud jste někdy psali JavaScript a museli jste v JavaScriptu napsat něco takového:
var p = document.createElement("p");
p.appendChild(document.createTextNode("Opravdová ryba.""));
div div = document.createElement("div");
div.setAttribute("id", "nové");
div.appendChild(p);

pak by se ti to mohlo hodit.

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

Navrhuji jednoduchý nástroj pro řešení problému - funkci create () (zdroj 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ělejme tabulku:
var držitel = document.getElementById("držitel2");
vartable;
var td;
držitel.appendChild(
stůl =
create("table", (id: "ugly", cols:3),
vytvořit("tělo", (),
create("tr", (),
create("td", ( šířka: "10%" ),
Ahoj),
td =
create("td", ( style: "background: #fcc" ),
"tam"),
create("td", ( Class: "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 nemá vliv na výsledek.
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á

function create(jméno, 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() == "style") (
el.style.cssText = atributy[i]; // pro kompatibilitu s IE
}
}
}
pro (var i = 2; i< arguments.length; i++) {
varval = argumenty[i];
if (typeof val == "řetězec") ( val = document.createTextNode(val) );
el.appendChild(val);
}
zpětný el;
}

Děkuji Ivanu Kurmanovovi za nápad,
Původní článek s pracovními příklady: