Aggiungi HTML all'elemento contenitore senza html interno
A volte, lo sviluppatore deve aggiungere vari elementi al contenitore per scopi diversi. Inoltre, potrebbero voler aggiungere gli elementi del contenitore utilizzati principalmente per aggiungere dati in un file. In una situazione del genere, puoi aggiungere caratteri, booleani, stringhe, numeri interi e galleggianti, ai dati in un programma utilizzando JavaScript.
Questo post spiegherà per l'avvio di un elemento a un elemento contenitore senza HTML interno.
Aggiungi HTML all'elemento contenitore senza html interno
Per aggiungere l'elemento contenitore HTML senza HTML interno, il “documento.getElementById ()" E "insertAdJacenthtml ()"Vengono utilizzati i metodi JavaScript.
Seguire la procedura dichiarata per la dimostrazione pratica.
Passaggio 1: crea un contenitore "div"
Inizialmente, crea un contenitore "div" utilizzando il ""Elemento e inserire un attributo di classe all'interno del tag di apertura DIV.
Passaggio 2: crea un pulsante
Quindi, usa il ""Tag per creare un pulsante e aggiungere il seguente attributo all'interno:
- IL "tipo"Specifica il tipo di elemento. A tale scopo, il valore di questo attributo è impostato come "invia".
- "al clic"Il gestore consente all'utente di chiamare una funzione ed eseguire un'azione quando si fa clic su un elemento/pulsante. Il valore di "OnClick" è impostato come "addElement ()".
- IL "addElement ()"La funzione è utilizzata allo scopo di aggiungere un particolare figlio/elemento alla fine del vettore migliorando la lunghezza del vettore.
- Successivamente, incorporare il testo tra ""Tag da visualizzare sul pulsante.
Passaggio 3: crea un altro div e aggiungi dati
Quindi, utilizza il ""Tag per creare un altro div e specificare un attributo ID per assegnare un particolare ID all'elemento Div. Aggiungi il tag di paragrafo e definisci i dati:
Elemento 1
Elemento 2
Produzione
Passaggio 4: contenitore "div" stile
Ora accedi al contenitore di div principale con l'aiuto del nome della classe ".contenuto principale"E applica le proprietà CSS menzionate nel frammento di seguito:
.contenuto principale
Testo-align: centro;
Margine: 30px 70px;
bordo: 4px blu solido;
imbottitura: 50px;
Background: RGB (247, 212, 205);
Qui:
- "allineamento"La proprietà viene utilizzata per l'impostazione dell'allineamento del testo.
- "margine"Assegna uno spazio al di fuori del confine definito.
- "confine"Specifica un limite attorno all'elemento definito.
- "imbottitura"Aggiungi spazio vuoto all'interno dell'elemento in un limite.
- "sfondo"La proprietà imposta un colore sul retro dell'elemento.
Produzione
Passaggio 6: elemento del pulsante di stile
Accedi al pulsante con il suo nome e applica le proprietà CSS elencate di seguito:
Button
Contesto: RGBA (84, 155, 214, 0.1);
Bordo: 3px Solid RGB (5, 75, 224);
raggio di confine: 6px;
Colore: RGB (6, 63, 250);
Transizione: tutto .5s;
linea di linea: 50px;
Cursore: puntatore;
contorno: nessuno;
Font-size: 40px;
imbottitura: 0 20px;
Secondo lo snippet di codice sopra:
- Fare domanda a "confine" E "sfondo"Colori sull'elemento pulsante assegnando i valori specifici.
- "raggio di confine"La proprietà viene utilizzata per impostare le curve del pulsante a forma rotonda.
- "colore"La proprietà definisce un colore per il testo aggiunto all'interno dell'elemento.
- "transizione"Fornisce un metodo per controllare la velocità di animazione quando si modifica le proprietà CSS
- "altezza della linea"La proprietà imposta l'altezza di una casella di linea. È utilizzato per impostare la distanza all'interno delle righe di testo.
- "cursore"Viene utilizzato per allocare il cursore del mouse per la visualizzazione quando un puntatore è su un elemento.
- "contorno"È utilizzato per aggiungere/disegnare una linea attorno ad elementi, per far risaltare l'elemento.
- "dimensione del font"Specifica la dimensione particolare per il testo in un elemento.
Produzione
Passaggio 7: Applica ": Hover" sul pulsante
Accedi all'elemento pulsante insieme a ": Hover"Classe pseudo che viene utilizzata per la selezione di elementi quando gli utenti li mouse su di loro:
Button: Hover
Colore: RGBA (255, 255, 255, 1);
Background: RGB (16, 17, 68);
Quindi, imposta il "colore" E "sfondo"Del pulsante applicando queste proprietà.
Passaggio 8: elemento di paragrafo di stile
Accedi al paragrafo utilizzando il "P":
P
Font-size: 20px;
Font-weight: audace;
Qui, applica il "dimensione del font" E "Font-peso" proprietà.
Produzione
Passaggio 9: Aggiungi HTML all'elemento contenitore
Per aggiungere l'HTML all'elemento contenitore, aggiungi il ""Tag e quindi seguire le istruzioni fornite:
- Inizializza una variabile come "ElementNumber"E assegna il valore a questa variabile come"3".
- Accedi alla funzione con il nome "addElement ()"Ciò è utilizzato allo scopo di aggiungere un particolare elemento alla fine del vettore migliorando la lunghezza/dimensione del vettore.
- Quindi, inizializza la variabile "genitore"
- Il valore "getElementById ()"Gestisci un solo nome alla volta e restituisce un nodo anziché una matrice completa di nodi
- Per un nuovo elemento, inserire una variabile e assegnare il valore come elemento in ""Tag insieme al numero dell'elemento.
- IL "insertAdJacenthtml ()"Il metodo viene utilizzato per l'aggiunta del codice HTML in una posizione particolare.
- Da ultimo, "ElementNumber++"Viene utilizzato per aumentare l'elemento all'interno del contenitore.
Si può osservare che l'elemento è stato aggiunto all'elemento contenitore secondo il clic:
Hai imparato il metodo più semplice per aggiungere l'HTML all'elemento del contenitore senza l'HTML interno.
Conclusione
Per aggiungere l'HTML all'elemento contenitore senza HTML interno, l'utente può utilizzare la funzione JavaScript. Innanzitutto, inizializza una variabile come "ElementNumber"E valore"documento.getElementById ()"Supporta solo un nome alla volta e restituisce solo un singolo nodo, non un array di nodi. Poi, "insertAdJacenthtml ()"Il metodo inserisce il codice HTML in una posizione specificata. Questo post è incentrato sull'apprendere l'HTML all'elemento contenitore senza l'HTML interno.