createTextNode JavaScript

Continuiamo il nostro tutorial utilizzando il metodo createTextNode in JavaScript, ovvero il metodo che ci consente di inserire del testo in un nodo.

Infatti, dopo aver creato un nuovo elemento oppure su un elemento già esistente, si può avere la necessità di inserire del testo al suo interno.

Per fare ciò si può utilizzare ad esempio il metodo createTextNode() di JavaScript, dove all’interno delle parentesi tonde specifico il nuovo testo da inserire.

La sintassi di questo metodo è la seguente:

element.createTextNode()

createTextNode JavaScript – first example

In questo esempio creeremo un nuovo paragrafo, dove all’interno inseriremo un testo a piacere. Il nuovo paragrafo sarà creato al click sul pulsante.

Provatelo cliccando sul pulsante sotto:

Procedimento

Spieghiamo dettagliatamente il procedimento per realizzare questo esempio.

Nel codice HTML inseriamo come prima un pulsante ‘Aggiungi nuovo paragrafo‘ e sotto di esso aggiungiamo un livello (div), dove apparirà il nuovo paragrafo generato.

La nostra funzione aggiungi() svolgerà delle semplicissime istruzioni:

  • dapprima creerà il nuovo elemento paragrafo,
  • poi scriverà del testo all’interno di questo paragrafo utilizzando il metodo createTextNode di JavaScript
  • e poi utilizzanado il metodo appendChild() aggiungerà questi contenuti appena creati nel punto desiderato. Il punto desiderato si ottiene grazie al metodo getElementById.

Ecco quindi il codice html per creare l’esempio:


Ed il codice JavaScript:



function aggiungi() {
  var paragrafo= document.createElement("p");
  var testo = document.createTextNode("Coding Creativo");
  paragrafo.appendChild(testo);
  document.getElementById("testo").appendChild(paragrafo);
}

Conclusione

Quindi, riassumendo in questa lezione abbiamo imparato a creare elementi nel DOM con JavaScript e ad utilizzare i metodi createElement(), createTextNode() e appendChild().

Nella prossima lezione continueremo ancora a parlare del DOM con JavaScript.

Alcuni link utili

Template responsive con html

Css Responsive

Come trovare immagini per il sito web

Quali colori scegliere per un sito web

Quali font scegliere per un sito web

Come realizzare un form in html

Tag strong

Collegamenti interni ad una pagina web

Continua la lettura su: https://www.codingcreativo.it/createtextnode-javascript/ Autore del post: Coding Creativo Fonte: https://www.codingcreativo.it

Articoli Correlati

To do list in JavaScript

In questa lezione realizzeremo una semplice to do list in JavaScript, un classico esercizio di JavaScript che permette di sperimentare i metodi appresi finora.Per realizzare questo progetto infatti utilizzeremo alcuni metodi per manipolare il DOM in JavaScript.Intanto provate il progetto che andremo a realizzare assieme inserendo una voce e cliccando poi sul pulsante add della figura sotto:App To Do ListTo do list in JavaScript – sviluppo del codiceInnanzitutto realizziamo il codice HTML del progetto.Creiamo dunque una casella di input con un button e predisponiamo una lista dove appariranno tutti gli elementi che aggiungeremo a mano a mano. Realizziamo poi del CSS a piacere per dare un tocco grafico, io ad esempio ho realizzato questo:

.container{
background: #ff6676;
padding: 30px;
display: flex;
flex-direction: column;
}

.container h3{
color: white;
text-align: center;
margin-bottom: 15px;
height: auto;
}

form{
display: flex;
width: 100%;
}

.textInput{
width: 100%;
border: none;
padding: 14px;
}

#add{
width: 30%;
cursor: pointer;
background: #2c45a3;
border: none;
color: white;
font-size: 18px;
}

ul#lists{
display: flex;
flex-direction: column;
margin: 10px 0;
list-style: none;
}

ul#lists li{
padding: 12px;
background: white;
border: 1px solid #2c45a3;
display:flex;
justify-content: space-between;
}

.delete{
padding: 10px;
cursor: pointer;
border: none;
background: #ff6676;
color: white;
}

Infine sviluppiamo il codice JavaScript necessario a far funzionare la nostra to do list:

const buttonAdd = document.getElementById(‘add’);
const lists = document.getElementById(‘lists’);
const textInput = document.querySelector(‘.textInput’);

buttonAdd.addEventListener(‘click’, generateList);

function generateList(event) {
event.preventDefault();

if (textInput.value === ”) return;

const li = document.createElement(‘li’);
lists.appendChild(li);
li.appendChild(document.createTextNode(textInput.value));

const buttonDelete = document.createElement(‘button’);
buttonDelete.className = ‘delete’;
buttonDelete.appendChild(document.createTextNode(‘X’));
li.appendChild(buttonDelete);

textInput.value = ”;

buttonDelete.addEventListener(‘click’, (event) = >{
const parentNodeEl = event.target.parentNode;
setTimeout(() = >{
parentNodeEl.remove();
}, 500)

});

}

Prima di tutto abbiamo controllato che la casella di input contenesse del testo ed in caso contrario si esce dalla funzione con un return. In questo modo, se la casella è vuota non si crea una lista.Dopo, abbiamo utilizzato il metodo addEventListener per catturare il click dapprima sul pulsante add per aggiungere una voce nell’elenzo e poi sul pulsante delete per eliminare la voce corrispondente.All’interno della funzione generateList abbiamo utilizzato i metodi createElement e createTextNode rispettivamente per creare dei tag necessari (li e button) ed aggiungere del testo.Dopo aver aggiunto la voce svuotiamo la casella di input.ConclusioneIn questa lezione abbiamo sviluppato una semplice to do list in JavaScript, provate anche voi a svilupparne una e scrivete nei commenti sotto. Nelle prossime lezioni svilupperemo tanti altri progetti creativi.Alcuni link utiliIndice tutorial JavaScriptIntroduzione al tutorial JavaScriptIl linguaggio JavaScriptCome utilizzare JavaScript alertVariabili in JavaScriptGioco indovina numero in JavaScriptGioco della morra cinese in JavaScriptSemplice quiz utilizzando gli arrayCome realizzare il gioco dei dadi online

Unità educativo didattiche di apprendimento per la settimana: la primavera, il mese di aprile, la Pasqua, schede di grammatica e di analisi logica – Educare alla pace, alla libertà, alla fratellanza

E’ domenica e già ci si prepara per le lezioni da predisporre per la seconda settimana del mese di aprile. Il sito di didattica è ricco di argomenti per questo periodo e pertanto vi propongo alcune unità educativo didattiche che potrebbero risultare utili nelle varie attività di apprendimento. Quali argomenti possono essere utili questa settimana quale spunto per le lezioni? Il mese di aprile presenta scenari che offrono tantissimi spunti didattici i quali ricadono in modo estremamente positivo sulla sfera motivazionale del bambino e conseguentemente fanno leva sulla volontà di apprendere.Per la parte grammaticale il sito è ricco di proposte che vi propongo in toto. Non rimane che sfogliarle, potrebbero offrire qualche idea adatta per i vari percorsi educativo didattici di apprendimento. I post proposti tengono conto anche degli articoli che i docenti ricercano sul sito in questo periodo dell’anno scolastico. Eccovi i link da poter visionare:La primaveraLa primavera con la sua magnifica girandola di colori, suoni ed odori, si presta particolarmente per numerose attività educativo didattiche di apprendimento. Nel sito è possibile visionare numerosi post, relativi a questo argomento, che suscitano l’interesse delle bambine e dei bambini facili da consultare, ed eventualmente stampare, con le relative schede per la lettura, l’analisi e la comprensione del testo. Eccovi i link da poter visionare:Aprile, dolce dormire di Ugo Betti”Arriva la primavera” – Dettato – Analisi, comprensione, ed interpretazione del testoRacconto di primavera: “La pioggia e le farfalle” – Analisi, comprensione ed interpretazione, del testo”La primavera” – Dettato – Analisi ed interpretazione del testoRitorna la primavera – Brano tratto da “Il Gigante Egoista” di Oscar Wilde – Lettura e comprensione del testo – Approfondimenti grammaticaliLa canzone della chiocciola di Jacques Prevert – Lettura e comprensione del testo.Primavera: “Ode a un ciuffo di violette” poesia di Pablo Neruda – Spunti grammaticali”I dodici mesi”, filastrocca di Gianni Rodari – Analisi ed interpretazione del testoPoesie, racconti, temi e dettati, che potrebbero interessarti:”I doni”, le quattro stagioni in una filastrocca di Angiolo Silvio NovaroPrimavera: “Ode a un ciuffo di violette” poesia di Pablo Neruda – Spunti grammaticaliLe quattro stagioni: filastrocche a rima baciata ed a rima alternataAprile, dolce dormire di Ugo BettiPrimavera in montagnaAprile di Aldo PalazzeschiPoesia di primaveraE’ dolce primavera di VirgilioPrimavera di Giovanni PascoliMarzo di Angiolo Silvio NovaroBrilla nell’aria di Giacomo LeopardiPrimavera di Stefano Bordiglioni”Una goccia di pioggia” di Mario LodiPasqua di Ada NegriAria di festa (tratto da i Malavoglia) di Giovanni VergaAlleluja di Angiolo Silvio NovaroFiabe antiche: “Il drago e l’uovo di Pasqua”Filastrocche di maggioFilastrocche d’aprileFilastrocche di marzoDettato: “Aspetti della primavera in campagna”. Spunti grammaticali.La PasquaEccovi una serie di link che affrontano il tema della Pasqua. Non è detto che non possano risultare utili per l’elaborazione di percorsi educativo – didattici di vario tipo:Il paese delle uova di cioccolato”E’ Pasqua!” di Maria Grazia BucceriRacconto di Pasqua “La Risurrezione” di Giovanni Papini”Gesù” di Giovanni Pascoli”Pasqua” di Ada NegriRacconto pasquale: “Aria di Pasqua” di Giovanni Verga”Alleluja” di Angiolo Silvio Novaro”Resurrezione” di Alessandro Manzoni”La domenica dell’ulivo” di Giovanni Pascoli”Pasqua” di Giovanni GozzanoRacconto di Pasqua: “La leggenda della passiflora”.”Il pianto della Madonna” di Angiolo Silvio NovaroFiaba antica: “Il drago e l’uovo di Pasqua”Dall’uovo di Pasqua” di Gianni Rodari”Pasqua” di Gianni RodariCronaca delle vacanze pasqualiDecodificare un racconto: “Felici come una Pasquetta”Racconto di Pasqua con schema di lavoro: “Il coniglio Pasqualino”Poesia di Pasqua: Gesù o Barabba?”Vola colomba bianca I due volti della PasquaEducare alla paceNon solo in questo tragici giorni ma in ogni istante la scuola può e deve lottare per il rispetto dei valori fondamentali che la vita in comune comporta. Educare alla pace, la libertà, l’uguaglianza tra uomini e donne, tra tutti le persone “senza distinzioni” di alcun tipo. Sono questi obiettivi irrinunciabili a cui la società tutta deve dare il proprio contributo. Le bambine e i bambini, le ragazze e i ragazzi, si rivelano molto sensibili a questi argomenti che incidono sulla sfera motivazionale, fanno da leva alla volontà, e offrono spunti straordinariamente coinvolgenti, trasversali a tutte le materie oggetto di studio. Educare ed istruire sono due facce della stessa medaglia.(e. b.)Dichiarazione ONU sul diritto alla pace (2016)Articolo 1Ognuno ha il diritto di godere la pace in modo che tutti i diritti umani sono promossi e protetti e lo sviluppo è pienamente realizzato.Articolo 2Gli stati devono rispettare, implementare e promuovere l’eguaglianza e la non discriminazione, la giustizia e lo stato di diritto e garantire la libertà dalla paura e dal bisogno quali misure per costruire la pace dentro e fra le società.Articolo 3Gli Stati, le Nazioni Unite e le agenzie specializzate, in particolare l’Organizzazione delle Nazioni Unite per l’Educazione, la Scienza e la Cultura devono assumere appropriate misure sostenibili per implementare la presente Dichiarazione. Le organizzazioni internazionali, regionali, nazionali e locali e la società civile sono incoraggiate a prestare supporto e assistenza nell’implementazione della presente Dichiarazione.Articolo 4Saranno promosse le istituzioni internazionali e nazionali di educazione per la pace al fine di rafforzare fra tutti gli esseri umani lo spirito di tolleranza, dialogo, cooperazione e solidarietà. Per questo scopo, l’Università per la Pace deve contribuire al grande compito universale di educare per la pace impegnandosi nell’insegnamento, nella ricerca, nella formazione postuniversitaria e nella disseminazione della conoscenza.Articolo 5Nulla della presente Dichiarazione sarà interpretato in senso contrario agli obiettivi e ai principi delle Nazioni Unite. Le disposizioni contenute nella presente Dichiarazione devono essere intese in linea con la Carta delle Nazioni Unite, la Dichiarazione Universale dei Diritti Umani e i pertinenti strumenti internazionali e regionali ratificati dagli Stati.Quali percorsi educativo didattici possono essere utili perché gli alunni interiorizzino i valori fondamentali che devono regolare la vita in comune? Il sito per la scuola primaria è ricco di racconti, poesie, filastrocche, temi, che mi auguro possano favorire un approccio positivo a questi argomenti fondamentali per il vivere insieme:Giornata della pace della fraternità e del dialogo tra appartenenti a culture e religioni diverse (4 ottobre)Scuola e immigrazione: poesie, filastrocche, temi.Festa della Repubblica, 2 giugnoCome mai gli uomini muoiono in guerra?Tema: Racconto la mia esperienza con i compagni di scuola stranieriBreve unità didattica sul Natale: “Se io fossi Gesù Bambino vorrei che … “.San Francesco: attività educativo didattiche per la scuola primaria.”Lettera a Gesù” poesia di Mario LodiPoesia per la pace, di Berthold BrechtAttività educativo didattiche per la scuola primaria sul tema dell’immigrazione: racconti, poesie, filastrocche.Tema: “L’amicizia” di Francesca JupeUna poesia per la pace: “La pelle”Il gelato alla pacePoesie e filastrocche di Natale per bambini della scuola primariaFesta di Ognissanti: poesia per la Pace – Attribuita a San Francesco d’AssisiLa recita nella scuola primaria: “C’era un ragazzo che come me amava i Beatles e i Rolling Stones”. Una canzone per la pace.La leggenda della mimosa – Un racconto per l’8 marzo, festa della donnaLa leggenda dell’estate di San Martino – Percorsi educativo didattici di apprendimento”I due volti della Pasqua” poesia di Ercole Bonjean”Un giorno qualunque”, poesia di Ercole Bonjean”Vola colomba bianca” poesia di Ercole Bonjean”Ad un passo dalla costa” (proposta di lettura sul tema dell’immigrazione per la classe quinta della scuola primaria)Il Cantico delle Creature – San Francesco d’Assisi (adattamento del testo per la scuola primaria)”Il giorno più bello”, poesia di Ercole Bonjean”Io amo la Terra” poesia”Per non dimenticare” (la giornata della memoria)”Il Barbone aristocratico” “Un albero speciale” “Il mio maestro”Una filastrocca per l’ambiente”La Befana e il Befanone””Un giorno qualunque””Un regalo di Natale dal cielo”Nel giorno di San Francesco”Nuovo Anno”Lettera di Babbo Natale ai bambiniSchede di grammatica e di analisi logicaScheda di grammatica: i pronomi – Spiegazioni, prove di verifica, ed esercizi di analisi grammaticaleScheda di grammatica: le preposizioni semplici ed articolate – Spiegazioni, prove di verifica, ed esercizi di analisi grammaticaleScheda di grammatica: le congiunzioni – Spiegazioni, prove di verifica, ed esercizi di analisi grammaticaleScheda di grammatica: le esclamazioni o interiezioni – Spiegazioni, esercizi di grammatica, prove di verifica.Scheda di grammatica: gli avverbi – Spiegazioni, prove di verifica, ed esercizi di analisi grammaticaleScheda  di grammatica – Le coniugazioni dei verbi: il modo infinitoScheda di grammatica – Il modo indicativo dei verbi: il tempo presenteScheda di grammatica – Il modo indicativo dei verbi: il passato prossimoScheda di grammatica – il modo indicativo dei verbi: il trapassato prossimo e il trapassato remotoScheda di grammatica – Il modo indicativo dei verbi: l’imperfettoScheda di grammatica – Il modo indicativo dei verbi: il passato remotoScheda di grammatica – Il modo indicativo dei verbi: il futuro sempliceScheda di grammatica – I verbi al modo condizionaleScheda di grammatica – I verbi al modo congiuntivoScheda di grammatica – I verbi irregolariScheda di grammatica – I verbi indefinitiScheda di grammatica – I verbi transitivi e intransitiviScheda di grammatica – La forma attiva e passiva del verboScheda di grammatica – I verbi riflessiviScheda di grammatica – I verbi impersonaliTi potrebbero interessare:Spiegazioni ed esercizi di grammaticaSpiegazioni ed esercizi di analisi logicaSchede di analisi logicaChe cos’è l’analisi logica e perché la studiamoIl soggetto e il predicato: l’enunciato minimo, spiegazioni ed eserciziIl soggetto e il predicato: spiegazioni ed eserciziIl soggetto e il predicato: esercizi di ribadimentoIl soggetto sottinteso: spiegazioni ed eserciziIl soggetto: eserciziIl soggetto (spiegazione ed esercizi per la classe quinta)L’attributo, l’apposizioneIl predicato verbale ed il predicato nominaleIl predicato verbaleIl predicato nominaleIl predicato verbale e nominale: eserciziIl complemento oggetto o direttoI complementi indirettiIl complemento di specificazioneIl complemento di termineIl complemento di tempoIl complemento di materiaIl complemento di mezzo Il complemento di causaIl complemento di modoIl complemento di origineIl complemento di luogoIl complemento predicativo del soggetto e dell’oggettoIl complemento d’agente e di causa efficienteEsercizi di analisi logicaEsercizi di analisi logicaEsercizi di analisi logicaVerificheVerificheVerificheTutti i post di analisi logicaRicordo alle colleghe ed ai colleghi che il motore di ricerca, presente in home page, è ricco di tantissimi argomenti che possono risultare utili per le varie attività didattiche. Buon proficuo lavoro dal maestro Ercole!

Vuoi rimanere aggiornato sulle nuove tecnologie per la Didattica e ricevere suggerimenti per attività da fare in classe?

Sei un docente?

soloscuola.it la prima piattaforma
No Profit gestita dai

Volontari Per la Didattica
per il mondo della Scuola. 

 

Tutti i servizi sono gratuiti. 

Associazione di Volontariato Koinokalo Aps

Ente del Terzo Settore iscritta dal 2014
Tutte le attività sono finanziate con il 5X1000