` by calling `div.append(anotherElement)`. +Qui abbiamo chiamato `append` su `document.body`, ma possiamo chiamare `append` su qualsiasi elemento e mettervi dentro un altro elemento. Ad esempio, possiamo appendere qualcosa a `div` chiamando `div.append(anotherElement)`. -Here are more insertion methods, they specify different places where to insert: +Ecco altri metodi d'inserimento; specificano i differenti posti dove inserire un elemento: -- `node.append(...nodes or strings)` -- append nodes or strings *at the end* of `node`, -- `node.prepend(...nodes or strings)` -- insert nodes or strings *at the beginning* of `node`, -- `node.before(...nodes or strings)` –- insert nodes or strings *before* `node`, -- `node.after(...nodes or strings)` –- insert nodes or strings *after* `node`, -- `node.replaceWith(...nodes or strings)` –- replaces `node` with the given nodes or strings. +- `node.append(...nodi o stringhe)` -- appende nodi o stringhe *alla fine* di `node`, +- `node.prepend(...nodi o stringhe)` -- inserisce nodi o stringhe *all'inizio* di `node`, +- `node.before(...nodi o stringhe)` –- inserisce nodi o stringhe *prima* di `node`, +- `node.after(...nodi o stringhe)` –- inserisce nodi o stringhe *dopo* `node`, +- `node.replaceWith(...nodi o stringhe)` –- rimpiazza `node` con i nodi o le stringhe passate. -Arguments of these methods are an arbitrary list of DOM nodes to insert, or text strings (that become text nodes automatically). +Gli argomenti di questi metodi sono liste arbitrarie di nodi DOM da inserire, o stringhe di testo (che diventano automaticamente nodi testo). -Let's see them in action. +Vediamoli in azione. -Here's an example of using these methods to add items to a list and the text before/after it: +Ecco un esempio dell'utilizzo di questi metodi per aggiungere elementi a una lista e del testo prima/dopo di essa: ```html autorun

@@ -121,24 +121,24 @@ Here's an example of using these methods to add items to a list and the text bef ``` -Here's a visual picture of what the methods do: +Ecco uno schema visivo di cosa fanno questi metodi: ![](before-prepend-append-after.svg) -So the final list will be: +La lista finale sarà: ```html before @@ -152,9 +152,9 @@ before after ``` -As said, these methods can insert multiple nodes and text pieces in a single call. +Come già detto, questi metodi possono inserire nodi multipli e pezzi di testo in una singola chiamata. -For instance, here a string and an element are inserted: +Ad esempio, qui vengono inseriti una stringa e un elemento: ```html run

@@ -163,9 +163,9 @@ For instance, here a string and an element are inserted: ``` -Please note: the text is inserted "as text", not "as HTML", with proper escaping of characters such as `<`, `>`. +Nota: il testo viene inserito "come testo", non "come HTML", con i dovugti ecape per caratteri come `<` o `>`. -So the final HTML is: +Quindi l'HTML finale sarà: ```html run *!* @@ -175,26 +175,27 @@ So the final HTML is:

``` -In other words, strings are inserted in a safe way, like `elem.textContent` does it. +In altre parole, le stringhe sono inserite in sicurezza, come con `elem.textContent`. -So, these methods can only be used to insert DOM nodes or text pieces. +Quindi, questi metodi possono essere usati solo per inserire nodi o pezzi di testo. -But what if we'd like to insert an HTML string "as html", with all tags and stuff working, in the same manner as `elem.innerHTML` does it? +E se volessimo inserire stringhe HTML "come HTML", con tutti i tag e le altre funzionalità, come con `elem.innerHTML`? ## insertAdjacentHTML/Text/Element -For that we can use another, pretty versatile method: `elem.insertAdjacentHTML(where, html)`. +Per questo abbiamo un altro metodo, molto versatile: `elem.insertAdjacentHTML(where, html)`. + -The first parameter is a code word, specifying where to insert relative to `elem`. Must be one of the following: +Il primo parametro è una parola-codice che specifica dove inserire in relazione a `elem`. Deve essere una delle seguenti -- `"beforebegin"` -- insert `html` immediately before `elem`, -- `"afterbegin"` -- insert `html` into `elem`, at the beginning, -- `"beforeend"` -- insert `html` into `elem`, at the end, -- `"afterend"` -- insert `html` immediately after `elem`. +- `"beforebegin"` -- inserisce `html` immediatamente prima di `elem`, +- `"afterbegin"` -- inserisce `html` dentro `elem`, all'inizio, +- `"beforeend"` -- inserisce `html` dentro `elem`, alla fine, +- `"afterend"` -- inserisce `html` immediatamente dopo `elem`. -The second parameter is an HTML string, that is inserted "as HTML". +Il secondo parametro è una stringa HTML, che viene inserita "come HTML" -For instance: +Ad esempio: ```html run

@@ -204,7 +205,7 @@ For instance: ``` -...Would lead to: +...Porterebbe a: ```html run

Hello

@@ -212,22 +213,22 @@ For instance:

Bye

``` -That's how we can append arbitrary HTML to the page. +Così possiamo appendere HTML alla pagina. -Here's the picture of insertion variants: +Qui un'immagine delle varianti d'inserimento: ![](insert-adjacent.svg) -We can easily notice similarities between this and the previous picture. The insertion points are actually the same, but this method inserts HTML. +Possiamo facilmente notare similarità tra questa immagine e le precedenti. I punti di inserimento sono gli stessi, ma questo metodo inserisce HTML. -The method has two brothers: +Il metodo ha due fratelli: -- `elem.insertAdjacentText(where, text)` -- the same syntax, but a string of `text` is inserted "as text" instead of HTML, -- `elem.insertAdjacentElement(where, elem)` -- the same syntax, but inserts an element. +- `elem.insertAdjacentText(where, text)` -- la stessa sintassi, ma una stringa `text` viene inserita "come testo" invece che come HTML, +- `elem.insertAdjacentElement(where, elem)` -- la stessa sintassi, ma inserisce un elemento. -They exist mainly to make the syntax "uniform". In practice, only `insertAdjacentHTML` is used most of the time. Because for elements and text, we have methods `append/prepend/before/after` -- they are shorter to write and can insert nodes/text pieces. +Questi metodi esistono per rendere la sintassi "uniforme". Nella pratica, nella maggioranza dei casi solo `insertAdjacentHTML` viene utilizzato, perché per elementi e testo abbiamo i metodi `append/prepend/before/after`; questi sono più brevi da scrivere e possono inserire nodi/pezzi di testo. -So here's an alternative variant of showing a message: +Ecco un variante alternativa per mostrare un messaggio: ```html run