Js lisää elementin sivulle. JavaScript: Miten objektiin lisätään uusi elementti? Käsittelyt elementtien HTML-koodilla

Tällä oppitunnilla opimme luomaan elementtisolmuja (createElement) ja tekstisolmuja (createTextNode). Harkitsemme myös menetelmiä, jotka on suunniteltu solmujen lisäämiseen puuhun (appendChild, insertBefore) ja solmujen poistamiseen puusta (removeChild).

Solmujen lisääminen puuhun

Uuden solmun lisääminen puuhun tapahtuu yleensä kahdessa vaiheessa:

Luo tarvittava solmu jollakin seuraavista tavoista:

• createElement() - luo elementin (solmun) määritetyllä nimellä (tunniste). CreateElement(element) -menetelmässä on yksi pakollinen parametri (elementti) - tämä on merkkijono, joka sisältää luotavan elementin (tunnisteen) nimen. Parametrin elementin (tagin) nimen on oltava isoilla kirjaimilla. Tämän seurauksena tämä menetelmä palauttaa luodun elementin.
• createTextNode() - luo tekstisolmun määritetyllä tekstillä. CreateTextNode(text) -menetelmässä on yksi pakollinen parametri (teksti) - tämä on merkkijono, joka sisältää tekstisolmun tekstin. Tämän seurauksena tämä menetelmä palauttaa luodun tekstisolmun.

Määritä paikka puussa, johon solmu tulee lisätä. Voit tehdä tämän käyttämällä jotakin seuraavista tavoista:

• appendChild() - lisää solmun sen elementin viimeiseksi lapseksi, johon tätä menetelmää kutsutaan. AppendChild(node) -menetelmässä on yksi pakollinen parametri: lisättävä solmu. Tämä menetelmä palauttaa lisätyn solmun tuloksena.
• insertBefore() - lisää solmun sen elementin lapsisolmuksi, johon tätä menetelmää kutsutaan. Metodissa insertBefore(newNode,existingNode) on kaksi parametria: newNode (pakollinen) on solmu, jonka haluat lisätä, olemassa olevaNode (valinnainen) on sen elementin lapsisolmu, jonka eteen haluat lisätä solmun. Jos toista parametria (existingNode) ei ole määritetty, tämä menetelmä lisää sen loppuun, ts. sen elementin viimeisenä lapsisolmuna, jolle tätä menetelmää kutsutaan. Metodi insertBefore() palauttaa lisätyn solmun tuloksena.

Esimerkiksi:

• Tietokone
• Kannettava tietokone
• Tabletti

Tarkastellaan monimutkaisempaa esimerkkiä, jossa lisäämme puuhun LI-solmun, joka sisältää tekstisolmun tekstillä "Älypuhelin" ul-luettelon lopussa.

Voit tehdä tämän seuraavasti:

Luo elementti (solmu) LI.

Luo tekstisolmu, joka sisältää tekstin "Älypuhelin".

Lisää luotu tekstisolmu juuri luodun LI-elementin viimeiseksi lapsisolmuksi

Lisää äskettäin luotu LI-solmu ul-elementin viimeiseksi lapsisolmuksi

//luo elementti (solmu) li var elementLI = document.createElement("li"); //luo tekstisolmu, joka sisältää tekstin "Älypuhelin" var textSmart= document.createTextNode("Älypuhelin"); //liitä luotu tekstisolmu viimeiseksi alielementiksi juuri luotuun LI-elementtiin elementLI.appendChild(textSmart); //hae elementti, johon luotu li-solmu lisätään lapsina var elementUL = document.getElementById("lista"); //lisää luotu li-elementti UL:n viimeiseksi alielementiksi komennolla id="list" elementUL.appendChild(elementLI);

AppendChild()- ja insertBefore()-menetelmiä työskennellessäsi olemassa olevien solmujen kanssa

Työskentely olemassa olevien solmujen kanssa appendChild()- ja insertBefore()-menetelmillä tapahtuu myös kahdessa vaiheessa:

Hanki olemassa oleva solmu puusta.

Määritä sijainti, johon solmu tulee lisätä, käyttämällä appendChild()- tai insertBefore()-metodia. Tämä poistaa solmun aiemmasta sijainnistaan.

Lisää esimerkiksi olemassa oleva li-elementti, joka sisältää tekstin "Tablet" luettelon alkuun (tämä poistaa sen edellisestä paikasta):

//hae luettelon sisältävä UL-elementti sen tunnuksella var elementUL = document.getElementById("lista"); //hae li-elementti, joka sisältää tekstisolmun "Tablet" var elementLI = elementUL.childNodes; //lisää elementti listan alkuun //tässä tapauksessa se poistetaan alkuperäisestä sijainnistaan ​​elementUL.insertBefore(elementLI,elementUL.firstChild);

Harjoittele

• Asiakirjassa on kaksi luetteloa. Sinun on siirrettävä elementtejä toisesta luettelosta ensimmäiseen.
• Luo luettelo, tekstikenttä ja 2 painiketta. Kirjoita JavaScript-koodi, joka, riippuen painetusta painikkeesta, lisää tekstikentän tekstin luettelon alkuun tai loppuun.

Solmujen poistaminen

Solmun poistaminen puusta suoritetaan kahdessa vaiheessa:

Hanki (etsi) tämä solmu puusta. Tämä toiminto suoritetaan yleensä jollakin seuraavista tavoista: getElementById() , getElementsByClassName() , getElementsByTagName() , getElementsByName() , querySelector() tai querySelectorAll() .

Kutsu emosolmun removeChild()-metodia, joka on välitettävä parametrina solmulle, jonka haluamme poistaa siitä.
RemoveChild()-metodi palauttaa poistetun solmun arvonaan tai nollan, jos poistettavaa solmua ei ollut olemassa.

//etsi poistettava solmu var findElement = document.getElementById("muistikirja"); //kutsu emosolmun removeChild-metodia //ja välitä sille löydetty solmu parametrina findElement.parentNode.removeChild(findElement);

Poista esimerkiksi viimeinen alielementti elementistä, jolla on id="myID" :

//hae elementti, jolla on id="omatunnus" var myID = document.getElementById("omatunnus"); //hae elementin myID viimeinen lapsisolmu var lastNode = myID.lastChild; //koska emme tiedä onko elementin viimeinen lapsisolmu elementti, //sitten etsitään while-silmukan avulla elementin myID viimeinen lapsi //kunhan elementillä on solmu ja sen tyyppi ei ole 1 (eli se ei ole elementti) suoritetaan, kun (lastNode && lastNode.nodeType!=1) ( //siirry edelliseen solmuun lastNode = lastNode.previousSibling; ) //jos löysimme elementin myID-solmulta if (lastNode) ( //sitten se on poistettava lastNode.parentNode.removeChild( lastNode);

Poista esimerkiksi kaikki alisolmut elementistä, jolla on id="myQuestion":

//hae elementti, josta haluamme poistaa kaikki sen alisolmut var elementQuestion = document.getElementById("myQuestion"); //while on ensimmäinen elementti while (elementQuestion.firstElement) ( //poista se elementQuestion.removeChild(element.firstChild); )

Harjoittele

Kirjoita funktio, joka poistaa kaikki tekstisolmut elementistä.

On 2 luetteloa (), kirjoita JavaScript-koodi, joka poistaa kaikki elementit luettelosta 1 ja 2.

Viimeisin päivitys: 1.11.2015

Elementtien luomiseksi dokumenttiobjektilla on seuraavat menetelmät:

createElement(elementinNimi) : Luo html-elementin, jonka tunniste välitetään parametrina. Palauttaa luodun elementin

createTextNode(text) : Luo ja palauttaa tekstisolmun. Solmun teksti välitetään parametrina.

var elem = document.createElement("div"); var elemText = document.createTextNode("Hei maailma");

Joten elem-muuttuja tallentaa viittauksen div-elementtiin. Pelkkä elementtien luominen ei kuitenkaan riitä, vaan ne on silti lisättävä verkkosivulle.

Elementtien lisäämiseen voimme käyttää jotakin Node-objektin menetelmistä:

appendChild(newNode) : lisää uuden solmun newNode lapsisolmujen kokoelman loppuun

insertBefore(newNode, referenceNode) : lisää uuden solmun newNode ennen referenssisolmua

Käytämme appendChild-menetelmää:

Artikkelin otsikko

Ensimmäinen kappale

Toinen kappale

var articleDiv = document.querySelector("div.artikkeli"); // luo elementti var elem = document.createElement("h2"); // luo tekstiä sille var elemText = document.createTextNode("Hei maailma"); // lisää tekstiä elementtiin aliarvona elem.appendChild(elemText); // lisää elementti div-lohkoon articleDiv.appendChild(elem);

Ensin luodaan tavallinen h2-otsikkoelementti ja tekstisolmu. Sitten lisäämme otsikkoelementtiin tekstisolmun. Sitten lisäämme otsikon johonkin web-sivun elementtiin:

Meidän ei kuitenkaan tarvitse luoda ylimääräistä tekstisolmua tekstin määrittämiseksi elementin sisällä, koska voimme käyttää textContent-ominaisuutta ja määrittää tekstin suoraan siihen:

Var elem = document.createElement("h2"); elem.textContent = "Hei maailma";

Tässä tapauksessa tekstisolmu luodaan implisiittisesti, kun teksti on asetettu.

Katsotaanpa nyt, kuinka samanlainen elementti lisätään div-lohkon lapsisolmujen kokoelman alkuun:

Var articleDiv = document.querySelector("div.artikkeli"); // luo elementti var elem = document.createElement("h2"); // luo tekstiä sille var elemText = document.createTextNode("Hei maailma"); // lisää tekstiä elementtiin aliarvona elem.appendChild(elemText); // hanki ensimmäinen elementti, jota edeltää lisäys var firstElem = articleDiv.firstChild.nextSibling; // lisää elementti div-lohkoon ennen ensimmäistä solmua articleDiv.insertBefore(elem, firstElem);

Jos meidän on lisättävä uusi solmu toiseen, kolmanteen tai mihin tahansa muuhun paikkaan, meidän on löydettävä se solmu, jota ennen meidän on lisättävä käyttämällä ominaisuuksien firstChild/lastChild ja nextSibling/previousSibling yhdistelmiä.

Elementin kopioiminen

Joskus elementit ovat koostumukseltaan melko monimutkaisia, ja niiden kopioiminen on paljon helpompaa kuin sisällön luominen niistä erillisillä kutsuilla. Voit kopioida olemassa olevia solmuja Node-objektista käyttämällä cloneNode() -menetelmää:

Var articleDiv = document.querySelector("div.artikkeli"); // kloonaa articleDiv-elementin var newArticleDiv = articleDiv.cloneNode(true); // lisää body-elementin loppuun document.body.appendChild(newArticleDiv);

CloneNode()-metodille välitetään Boolen arvo parametrina: jos true välitetään, elementti kopioidaan kaikkien lapsisolmujen kanssa; jos false on hyväksytty, se kopioidaan ilman lapsisolmuja. Eli tässä tapauksessa kopioimme solmun koko sisältöineen ja lisäämme sen sitten body-elementin loppuun.

Elementin poistaminen

Voit poistaa elementin kutsumalla Node-objektin removeChild()-metodia. Tämä menetelmä poistaa yhden lapsisolmuista:

Var articleDiv = document.querySelector("div.artikkeli"); // etsi poistettava solmu - ensimmäinen kappale var removableNode = document.querySelectorAll("div.article p"); // poista solmu articleDiv.removeChild(removableNode);

Tässä tapauksessa ensimmäinen kappale poistetaan div-lohkosta

Elementin vaihtaminen

Korvaa elementti käyttämällä Node-objektin menetelmää replaceChild(newNode, oldNode). Tämä menetelmä ottaa uuden elementin ensimmäiseksi parametriksi, joka korvaa vanhan elementin oldNode, joka välitettiin toisena parametrina.

Var articleDiv = document.querySelector("div.artikkeli"); // etsi korvattava solmu - ensimmäinen kappale var oldNode = document.querySelectorAll("div.article p"); // luo elementti var newNode = document.createElement("h2"); // luo tekstiä sille var elemText = document.createTextNode("Hei maailma"); // lisää tekstiä elementtiin alielementtinä newNode.appendChild(elemText); // korvaa vanha solmu uudella articleDiv.replaceChild(newSolmu, oldSolmu);

Tässä tapauksessa korvaamme ensimmäisen kappaleen h2-otsikolla.

Hei! JavaScriptin avulla voit paitsi löytää elementtejä sivulta (lue kuinka tämä tehdään), vaan myös luoda elementtejä dynaamisesti ja lisätä ne DOM:iin. Miten tämä tehdään, keskustellaan tässä oppitunnissa.

Uuden elementin luomiseksi verkkosivulle dokumenttiobjektilla on seuraavat menetelmät:

• createElement(elementName) : luo uuden elementin, mikä tahansa HTML-sivutunniste on välitettävä parametrina, palauttaa HTML-elementin
• createTextSolmu(teksti) : Luo tekstisolmun ja palauttaa saman.

Elementin lisääminen

Katsotaanpa pientä esimerkkiä:

Var el = document.createElement("div"); var elText = document.createTextNode("Hei maailma");

Kuten esimerkistä näkyy, elem-muuttuja tallentaa linkin uuteen div-elementtiin. Kuten ymmärrät, elementtien luominen ei kuitenkaan riitä, vaan ne on lisättävä verkkosivulle. Kun luomme elementtejä tällä tavalla, ne näyttävät olevan jonkinlaisessa virtuaalitilassa tai muistissa, mutta niiden näyttämiseksi verkkosivulla on erityisiä menetelmiä.

Seuraavia menetelmiä käytetään elementtien lisäämiseen verkkosivulle:

• appendChild(newNode) : lisää uuden elementin sen elementin loppuun, jossa tätä menetelmää kutsuttiin
• insertBefore(newNode, referenceNode) : lisää uuden solmun ennen toiseksi parametriksi määritettyä solmua.

Katsotaanpa esimerkkiä elementin liittämisestä verkkosivulle appendChild-menetelmällä:

Artikkelin otsikko

Ensimmäinen kappale

Toinen kappale

var artikkeli = document.querySelector("div.artikkeli"); // luo elementti var el = document.createElement("h3"); // luo tekstiä sille var elTxt = document.createTextNode("Hei maailma"); // lisää tekstiä elementtiin lapsielementtinä el.appendChild(elTxt); // lisää elementti div-lohkoon article.appendChild(el);

Esimerkissä luotiin tavallinen h3-otsikkoelementti ja tekstisolmu. Tekstisolmu lisätään sitten otsikkoelementtiin. Otsikko lisätään sitten johonkin web-sivun elementtiin, jotta se näkyy sivulla.

Mutta tekstin luomiseen elementin sisällä ei ole ollenkaan välttämätöntä, vaan on olemassa textContent-ominaisuus, jonka avulla voit määrittää tekstin suoraan elementtiin.

Var el = document.createElement("h3"); el.textContent = "Hei, minä olen otsikko";

Tässä tapauksessa teksti luodaan implisiittisesti, kun teksti asetetaan suoraan.

Katsotaanpa myös, kuinka tämä elementti lisätään div:n alisolmujen kokoelman alkuun:

Var artDiv = document.querySelector("div.artikkeli"); // luo elementti var el = document.createElement("h2"); // luo tekstiä sille var eltxt = document.createTextNode("Hei maailma"); // lisää tekstiä elementtiin lapsielementtinä el.appendChild(eltxt); // hanki ensimmäinen elementti, jota edeltää lisäys var firstEl = artDiv.firstChild.nextSibling; // lisää elementti div-lohkoon ennen ensimmäistä solmua artDiv.insertBefore(el, firstEl);

Jos sinun on yhtäkkiä lisättävä uusi solmu toiseen, kolmanteen tai mihin tahansa muuhun paikkaan, sinun on löydettävä solmu, jonka eteen sinun on lisättävä se käyttämällä seuraavia ominaisuuksia firstChild/lastChild tai nextSibling/previousSibling.

Elementin kopioiminen

On tilanteita, joissa elementit ovat koostumukseltaan melko monimutkaisia, ja niitä on helpompi kopioida. Tätä varten käytetään erillistä cloneNode()-menetelmää.

Var artDiv = document.querySelector("div.artikkeli"); // Kloonaa artikkeliDiv-elementti var newArtDiv = artDiv.cloneNode(true); // lisää body-elementin loppuun document.body.appendChild(newArtDiv);

Sinun on välitettävä Boolen arvo parametrina cloneNode()-metodille: jos hyväksyt true, elementti kopioidaan kaikkien alisolmujen mukana; jos hyväksyt false, se kopioidaan ilman alisolmuja. Tässä esimerkissä kopioimme elementin sisällön kanssa ja lisäämme sen verkkosivun loppuun.

Elementin poistaminen

Elementin poistamiseksi sinun on kutsuttava removeChild()-metodi. Tämä menetelmä poistaa yhden lapsisolmuista:

Var artDiv = document.querySelector("div.artikkeli"); // etsi poistettava solmu - ensimmäinen kappale var removNode = document.querySelectorAll("div.article p"); // poista solmu artDiv.removeChild(removNode);

Tämä esimerkki poistaa ensimmäisen kappaleen div-lohkosta

Elementin vaihtaminen

Korvaaksesi yhden elementin toisella, käytä korvaaChild(newNode, oldNode) -menetelmää. Tämä menetelmä ottaa uuden elementin 1. parametriksi, joka korvaa vanhan elementin, joka välitettiin 2. parametrina.

Var artDiv = document.querySelector("div.artikkeli"); // etsi korvattava solmu - ensimmäinen kappale var old = document.querySelectorAll("div.article p"); // luo elementti var new = document.createElement("h3"); // luo tekstiä sille var elemtxt = document.createTextNode("Hei maailma"); // lisää tekstiä elementtiin alielementtinä new.appendChild(elemtxt); // korvaa vanha solmu uudella artDiv.replaceChild(new, old);

Tässä esimerkissä korvaamme ensimmäisen kappaleen juuri luomallamme h2-otsikolla.

TULOKSET.

Elementin luomiseen käytetään seuraavia menetelmiä:

document.createElement(tag) - luo uuden elementin.

document.createTextNode(text) - luo tekstisolmun

Solmujen lisäämis- ja poistomenetelmät

• parent.appendChild(el) - liittää elementin olemassa olevan elementin loppuun
• parent.insertBefore(el, nextSibling) - lisää elementin olemassa olevan elementin edelle
• parent.removeChild(el) - poistaa elementin
• parent.replaceChild(newElem, el) - korvaa elementin toisella
• parent.cloneNode(bool) - kopioi elementin, jos parametri bool=true, elementti kopioidaan kaikkien alielementtien kanssa ja jos epätosi, niin ilman alielementtejä

Tehtävät Elementtien lisäystoiminto

Kirjoita funktio insertAfter(newEl,oldEl), joka lisää elementin toisensa jälkeen itse funktioon, itse elementit välitetään parametreina.

Jos sinun on luotava HTML-elementti, etkä tiedä kuinka toteuttaa se, olet tullut oikeaan paikkaan. Tässä artikkelissa tarkastellaan paitsi esimerkkiä elementin luomisesta, myös kirjoitetaan universaali funktio, jolla voit luoda uuden elementin, lisätä siihen erilaisia ​​attribuutteja ja täyttää sen tekstillä.

Mutta ensin aloitetaan jostain yksinkertaisesta. Uutta elementtiä luotaessa käytämme DOM-objektin menetelmiä, nimittäin:

* document.createElement(param) - tätä menetelmää käytetään suoraan elementin luomiseen. Parametrina se ottaa luotavan elementin nimen. Palauttaa linkin luotuun elementtiin.

document.createElement('div'); // luo div-elementin.

* document.appendChild(param) – tätä menetelmää käytetään elementin lisäämiseen HTML-koodiin. Ottaa linkin luotuun elementtiin parametriksi;

var parent = document.getElementsByTagName("BODY"); //hae linkki body-elementtiin

var elem = document.createElement('div');// luo div-elementin

parent.appendChild(elem) // lisää elementin, jossa vanhempi on linkki, johon elementtimme lisätään, tässä tapauksessa se on body;

* document.createTextNode() - menetelmää käytetään tekstin sijoittamiseen elementin sisään.

Esimerkki elementin luomisesta.

funktio createElem() (

Muutt uusiP = document.createElement("p");

NewP.className = "elemClass";

NewP.id = "omaPID";

NewP.style.width = "100px";

NewP.style.height = "300px";

NewP.style.background = "#c5c5c5";

NewP.style.color = "#000";

Var text = "lisättävä teksti";

Muutt tekstiSolmu = document.createTextSolmu(teksti);

NewP.appendChild(tekstisolmu);

Parent.appendChild(newP);

CreateElem-funktiossa päämuuttuja on viittaus elementtiin (body), johon uusi elementti sijoitetaan. Sitten luodaan uusi elementti P, siihen lisätään attribuutit id, class, style ja asetetaan näiden attribuuttien arvot. Sitten luodaan tekstisolmu ja lisätään se uuteen elementtiin. Kaiken tämän jälkeen itse elementti lisätään kehon runkoon. Jotta voit tehdä suuren määrän uusia elementtejä, sinun on työskenneltävä kovasti, koska... saatat joutua sijoittamaan ne eri paikkoihin verkkosivulla, esim. kiinnittää eri elementteihin.

Esimerkki elementin luomisesta yleisfunktiolla.

Tämä toiminto auttaa sinua luomaan uuden elementin, lisäämään siihen erilaisia ​​attribuutteja, liittämään siihen tekstisolmun, sijoittamaan sen määritetyn elementin eteen tai jälkeen tai korvaamaan elementin uudella elementillä. Vain nimi argumentti vaaditaan.

funktio createElement(nimi, attrs, tyyli, teksti, menneisyyden_tunnus, sijainti, muutettu) (

Var-emo = document.getElementsByTagName("BODY");

Muutt e = document.createElement(nimi);

Jos (attrs) (

For (näppäile attrs) (

Jos (avain == "luokka") (

E.className = attrs;

) else if (avain == "id") (

E.id = attrs;

) muu (

E.setAttribute(avain, attrs);

jos (tyyli) (

Sillä (avain tyyliin) (

E.style = tyyli;

Jos (teksti) (

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

Parent.appendChild(e);

Jos(aiempi_id)(

Muutt vanha_elementti = document.getElementById(aiempi_tunnus);

If(position=="ennen")(

Parent.insertBefore(e,old_elem)

)else if(position=="jälkeen")(

InsertAfter(parent,e,old_elem);

Jos(muutettu!="" && muutettu==tosi)(

Parent.removeChild(old_elem);

Vaihtoehdot:

Nimi – elementin nimi;

Attrs – luodun elementin attribuutit;

Tyyli – luodun elementin tyylit;

Teksti – lisätty teksti;

Past_id – sen elementin tunnus, jonka viereen elementtimme sijoitetaan;

Sijainti - voi ottaa kaksi arvoa ennen, jälkeen;

Muutettu – lippu, jolla on kaksi arvoa: true tai false. Jos tämä parametri on tosi, vanha elementti korvataan uudella.

Esimerkkinä luodaan DIV-elementti määritteillä ja korvataan vanha elementti uudella elementillä.

createElement("div",

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

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

"Tässä on tekstini",

"testata",

"ennen"