Če ste kdaj pisali JavaScript in ste morali napisati nekaj takega:
var p = document.createElement("p");
p.appendChild(document.createTextNode("Prava ribica."));
var div = document.createElement("div");
div.setAttribute("id", "novo");
div.appendChild(p);

potem vam bo to lahko koristilo.

Težava: Ko ustvarite več elementov, ugnezdenih drug v drugega, koda postane zelo zapletena.

Ponujam preprosto orodje za rešitev problema - funkcijo create() (izvorna koda spodaj). Na primer, ustvarimo odstavek besedila:
var el = create("p", ( ), "Zbogom, ljubezen!");

Ali div z odstavkom in povezavo v njem:
var div = create("div", ( id: "new", style: "background:#fff"),
create("p", ( align: "center"),
"uvod:"
create("a", ( href: "ua.fishki.net/picso/kotdavinchi.jpg"),
"slika"),
": konec")
);

Ali pa tukaj naredimo tabelo:
var holder = document.getElementById("holder2");
var tabela;
var td;
holder.appendChild(
tabela =
create("table", (id: "grdo", cols:3),
ustvari ("tbody", (),
ustvari ("tr", (),
create("td", ( širina: "10%"),
"zdravo")
td =
create("td", ( slog: "ozadje: #fcc"),
"tam")
create("td", ( Razred: "special2"), "povsod")
)
);

Prosimo, upoštevajte: 1. IE zahteva element tbody, sicer noče prikazati tabele.
2. Atribut razreda je v konfliktu z nečim, zato ga morate napisati kot Razred. Zdi se, da to ne vpliva na rezultat.
3. table = in tr = v primeru omogočata shranjevanje ustvarjenih ugnezdenih objektov za nadaljnje delo z njimi.
4. Ta koda deluje v brskalnikih IE, Mozilla in Opera sama funkcija create(name, attributes).
var el = document.createElement(name);
if (atributi typeof == "objekt") (
za (var i v atributih) (
el.setAttribute(i, atributi[i]);

If (i.toLowerCase() == "razred") (
el.className = atributi[i]; // za združljivost z IE

) else if (i.toLowerCase() == "style") (
el.style.cssText = atributi[i]; // za združljivost IE
}
}
}
za (var i = 2;i< arguments.length; i++) {
var val = argumenti[i];
if (typeof val == "string") ( val = document.createTextNode(val));
el.appendChild(val);
}
vrnitev el;
}

Za idejo se moramo zahvaliti Ivanu Kurmanovu,
Izvirni članek z delovnimi primeri:

V tej objavi vam želim povedati, kako dodati ali odstraniti element iz predmeta v JavaScriptu. Je zelo preprosto, vendar se mnogi začetniki, tako kot jaz prej, zaradi tega pogosto zmedejo.

Ustvarimo objekt na primer var obj = ( name: "alex", last_name: "petrov", website: "site", );

Imamo preprost objekt, ki vsebuje podatke, kot so ime, priimek in spletno mesto. Podatki so lahko popolnoma kakršni koli, a za namene te objave bo točno to.

Dodajanje novega elementa obj.country = "ru"; // bo objektu dodal nov ključ "država" z vrednostjo "ru" obj["city"] = "Moskva"; // dodal bo tudi nov ključ, samo "mesto" z vrednostjo "Moskva"

Zgornja koda je jasna, a samo za pojasnilo: nove vrednosti lahko dodate objektu v sintaksi objekta z uporabo "." in ključ ali običajni format polja. Če ga deklarirate kot matriko, potem je obj še vedno objekt, saj ste ga prej tako označili zahvaljujoč ().

Ustvarite predmet znotraj predmeta obj.other_obj = (); // ustvarite novo vrednost other_obj v obj in jo spremenite v objekt

Zdaj pa dodamo nekaj podatkov:

Obj.other_obj.first = "prvi ključ novega predmeta"; obj.other_obj.second = "drugi";

Ustvarili smo dve novi vrednosti, prvo in drugo, znotraj other_obj.

Brisanje elementa delete obj.name; // vrne: true

Uporabite lahko delete, ki lahko odstrani elemente iz predmetov. Na ta način ne morete izbrisati celotnega predmeta, če pa morate, lahko storite to:

Obj = (); // Ponovno naredi objekt prazen

To je vse, če imate še vedno kakršna koli vprašanja o objektih v JavaScriptu, napišite komentar spodaj, poskušal vam bom pomagati.

pozdravljena Z uporabo JavaScripta ne morete le najti elementov na strani (preberite, kako to storiti), temveč tudi dinamično ustvariti elemente in jih dodati v DOM. Kako to storiti, bomo razpravljali v tej lekciji.

Da bi ustvarili nov element na spletni strani - predmet dokumenta ima naslednje metode:

• createElement(elementName) : ustvari nov element, katera koli oznaka strani HTML mora biti posredovana kot parameter, vrne element HTML
• createTextNode(text) : Ustvari besedilno vozlišče in vrne isto.

Dodajanje elementa

Poglejmo majhen primer:

Var el = document.createElement("div"); var elText = document.createTextNode("Pozdravljen svet");

Kot lahko vidite iz primera, bo spremenljivka elem shranila povezavo do novega elementa div. Vendar, kot razumete, ustvarjanje elementov ni dovolj; še vedno jih je treba dodati na spletno stran. Konec koncev, ko ustvarjamo elemente na ta način, se zdi, da so v nekem navideznem prostoru ali v pomnilniku, a da jih prikažemo na spletni strani, obstajajo posebne metode.

Za dodajanje elementov na spletno stran se uporabljajo naslednje metode:

• appendChild(newNode) : doda nov element na konec elementa, na katerem je bila ta metoda poklicana
• insertBefore(newNode, referenceNode) : doda novo vozlišče pred vozlišče, navedeno kot drugi parameter.

Oglejmo si primer pripenjanja elementa na spletno stran z uporabo metode appendChild:

Naslov članka

Prvi odstavek

Drugi odstavek

var article = document.querySelector("div.article"); // ustvari element var el = document.createElement("h3"); // ustvari besedilo zanj var elTxt = document.createTextNode("Hello world"); // dodaj besedilo elementu kot podrejeni element el.appendChild(elTxt); // dodajte element v blok div article.appendChild(el);

Primer je ustvaril običajni element glave h3 in besedilno vozlišče. Besedilno vozlišče se nato doda naslovnemu elementu. Naslov se nato doda enemu od elementov spletne strani, tako da ga je mogoče videti na strani.

Vendar za ustvarjanje besedila znotraj elementa sploh ni potrebno imeti dodatnega besedilnega vozlišča; za to obstaja lastnost textContent, ki omogoča neposredno dodelitev besedila elementu.

Var el = document.createElement("h3"); el.textContent = "Živjo, jaz sem naslov";

V tem primeru bo besedilo ustvarjeno implicitno pri neposredni nastavitvi besedila.

In poglejmo tudi, kako dodati ta element na začetek zbirke podrejenih vozlišč diva:

Var artDiv = document.querySelector("div.article"); // ustvari element var el = document.createElement("h2"); // ustvari besedilo zanj var eltxt = document.createTextNode("Hello world"); // dodaj besedilo elementu kot podrejeni element el.appendChild(eltxt); // pridobi prvi element, pred katerim bo dodatek var firstEl = artDiv.firstChild.nextSibling; // dodajte element v blok div pred prvim vozliščem artDiv.insertBefore(el, firstEl);

Če morate nenadoma dodati novo vozlišče na drugo, tretje ali katero koli drugo mesto, morate poiskati vozlišče, pred katerim ga morate vstaviti, z uporabo naslednjih lastnosti firstChild/lastChild ali nextSibling/previousSibling.

Kopiranje elementa

Obstajajo situacije, ko so elementi po sestavi precej zapleteni in jih je lažje kopirati. Za to se uporablja ločena metoda cloneNode().

Var artDiv = document.querySelector("div.article"); // kloniraj element articleDiv var newArtDiv = artDiv.cloneNode(true); // dodaj na konec elementa body document.body.appendChild(newArtDiv);

Metodi cloneNode() morate posredovati logično vrednost kot parameter: če podate true, bo element kopiran skupaj z vsemi podrejenimi vozlišči; če posredujete false, bo kopiran brez podrejenih vozlišč. V tem primeru kopiramo element skupaj z njegovo vsebino in ga dodamo na konec spletne strani.

Odstranjevanje elementa

Če želite odstraniti element, morate poklicati metodo removeChild(). Ta metoda bo odstranila eno od podrejenih vozlišč:

Var artDiv = document.querySelector("div.article"); // poiščemo vozlišče, ki ga bomo izbrisali - prvi odstavek var removNode = document.querySelectorAll("div.article p"); // odstranite vozlišče artDiv.removeChild(removNode);

Ta primer bo odstranil prvi odstavek iz bloka div

Zamenjava elementa

Za zamenjavo enega elementa z drugim uporabite metodo replaceChild(newNode, oldNode). Ta metoda vzame nov element kot 1. parameter, ki nadomesti stari element, posredovan kot 2. parameter.

Var artDiv = document.querySelector("div.article"); // poiščemo vozlišče, ki ga bomo zamenjali - prvi odstavek var old = document.querySelectorAll("div.article p"); // ustvari element var new = document.createElement("h3"); // ustvari besedilo zanj var elemtxt = document.createTextNode("Hello world"); // dodajanje besedila elementu kot podrejenemu elementu new.appendChild(elemtxt); // zamenjaj staro vozlišče z novim artDiv.replaceChild(novo, staro);

V tem primeru zamenjamo prvi odstavek z naslovom h2, ki smo ga pravkar ustvarili.

REZULTATI.

Za ustvarjanje elementa se uporabljajo naslednje metode:

document.createElement(tag) - ustvari nov element.

document.createTextNode(text) - ustvari besedilno vozlišče

Metode vstavljanja in odstranjevanja vozlišč

• parent.appendChild(el) - doda element na konec obstoječega elementa
• parent.insertBefore(el, nextSibling) - vstavi element pred obstoječi element
• parent.removeChild(el) - odstrani element
• parent.replaceChild(newElem, el) - zamenja en element z drugim
• parent.cloneNode(bool) - kopira element, če je parameter bool=true, se element kopira z vsemi podrejenimi elementi, če je false, pa brez podrejenih elementov

Naloge Funkcija vstavljanja elementov

Napišite funkcijo insertAfter(newEl,oldEl), ki v samo funkcijo vstavi en element za drugim, sami elementi pa se posredujejo kot parametri.

Če morate ustvariti element HTML, in ne veste, kako to izvesti, potem ste prišli na pravo mesto. Ta članek ne bo le obravnaval primera ustvarjanja elementa, ampak tudi napisal univerzalno funkcijo, s katero lahko ustvarite nov element, mu dodate različne atribute in ga napolnite z besedilom.

Toda najprej začnimo z nečim preprostim. Pri ustvarjanju novega elementa bomo uporabili metode objekta DOM, in sicer:

* document.createElement(param) - ta metoda se uporablja neposredno za ustvarjanje elementa. Kot parameter vzame ime elementa, ki se ustvarja. Vrne povezavo do ustvarjenega elementa.

document.createElement('div'); // bo ustvaril element div.

* document.appendChild(param) – ta metoda se uporablja za dodajanje elementa v kodo HTML. Kot parameter vzame povezavo do ustvarjenega elementa;

var parent = document.getElementsByTagName("BODY"); //pridobite povezavo do elementa body

var elem = document.createElement('div');// bo ustvaril element div

parent.appendChild(elem); // doda element, kjer je parent povezava, kamor bo dodan naš element, v tem primeru je to telo telesa;

* document.createTextNode() - metoda se uporablja za postavitev besedila znotraj elementa.

Primer ustvarjanja elementa.

funkcija 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 = "besedilo za vstavljanje";

Var textNode = document.createTextNode(besedilo);

NewP.appendChild(textNode);

Parent.appendChild(newP);

V funkciji createElem je nadrejena spremenljivka sklic na element (telo), v katerega bo postavljen novi element. Nato se ustvari nov element P, dodajo se mu atributi id, class, style in nastavijo se vrednosti teh atributov. Nato se ustvari besedilno vozlišče in doda našemu novemu elementu. Po vsem tem se element sam doda telesu telesa. Za izdelavo velikega števila novih elementov se boste morali zelo potruditi, saj... morda jih boste morali vstaviti različni kraji spletne strani, tj. pritrdite na različne elemente.

Primer ustvarjanja elementa z uporabo univerzalne funkcije.

Ta funkcija vam bo pomagala ustvariti nov element, mu dodati različne atribute, mu pripeti besedilno vozlišče, ga postaviti pred ali za podanim elementom ali zamenjati element z novo ustvarjenim elementom. Potreben je le argument imena.

funkcija createElement(ime, attrji, slog, besedilo, pretekli_id, položaj, spremenjeno) (

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

Var e = document.createElement(name);

Če (attr) (

Za (vnesite atribute) (

Če (ključ == "razred") (

E.className = attrs;

) else if (ključ == "id") (

E.id = attrs;

) drugače (

E.setAttribute(ključ, attr);

Če (slog) (

Za (ključ v stilu) (

E.style = slog;

Če (besedilo) (

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

Parent.appendChild(e);

If(past_id)(

Var old_elem = document.getElementById(past_id);

If(position=="before")(

Parent.insertBefore(e,old_elem)

)drugače if(position=="after")(

InsertAfter(nadrejeni,e,stari_elem);

If(changed!="" && changes==true)(

Parent.removeChild(old_elem);

Parametri:

Ime – ime elementa;

Attrs – atributi ustvarjenega elementa;

Slog – slogi ustvarjenega elementa;

Besedilo – vstavljeno besedilo;

Past_id – id elementa, poleg katerega se bo nahajal naš element;

Položaj - lahko ima dve vrednosti pred, po;

Spremenjeno – zastavica, ki ima dve vrednosti, true ali false. Če je ta parameter nastavljen na true, bo stari element zamenjan z novim;

Na primer, ustvarimo element DIV z atributi in zamenjajmo stari element z novo ustvarjenim.

createElement("div",

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

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

"tu je moje besedilo",

"test",

"prej"

Kako delati