JavaScript Cambia testo
-
Modificare il testo di un elemento utilizzando la proprietà
textContentin JavaScript -
Cambia il testo di un elemento usando la funzione
createTextNode()in JavaScript
Questo tutorial discuterà come modificare il testo di un elemento utilizzando la proprietà textContent e la funzione createTextNode() in JavaScript.
Modificare il testo di un elemento utilizzando la proprietà textContent in JavaScript
Se vuoi sostituire il vecchio testo di un elemento con del nuovo testo, devi ottenere quell’elemento usando il suo id o il nome della classe, e poi puoi sostituire il vecchio testo con il nuovo testo usando la proprietà textContent. Se non viene specificato un id o un nome di classe, è possibile utilizzare l’attributo id o class per assegnare all’elemento un id o un nome di classe. Assicurati che l’id o il nome della classe sia univoco; in caso contrario, verrà modificato anche qualsiasi elemento con lo stesso id. Ad esempio, creiamo un elemento di testo utilizzando il tag span e cambiamo il suo testo utilizzando la funzione textContent in JavaScript. Vedi il codice qui sotto.
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<span id="SpanID"> Old Text </span>
<script type="text/javascript">
document.getElementById("SpanID").textContent="New Text";
</script>
</body>
</html>
Produzione:
New Text
Il codice JavaScript è inserito all’interno del file HTML nel codice sopra, ma puoi separarli se lo desideri. Puoi anche specificare la condizione in base alla quale il testo deve essere modificato come, facendo clic su un pulsante. Se non vuoi sostituire il testo ma aggiungere del nuovo testo con il vecchio testo, puoi utilizzare il metodo seguente.
Cambia il testo di un elemento usando la funzione createTextNode() in JavaScript
Se vuoi aggiungere il nuovo testo con il vecchio testo, devi ottenere quell’elemento usando il suo id o il nome della classe e quindi usando la funzione createTextNode(), puoi creare un nodo del nuovo testo e usando il appendChild() funzione è possibile aggiungere il nuovo testo al vecchio testo. Se non viene specificato un id o un nome di classe, è possibile utilizzare l’attributo id o class per assegnare all’elemento un id o un nome di classe. Assicurati che l’id o il nome della classe sia univoco; in caso contrario, verrà modificato anche qualsiasi elemento con lo stesso id. Ad esempio, creiamo un elemento di testo utilizzando il tag span e aggiungiamo il suo testo utilizzando la funzione createTextNode() in JavaScript. Vedi il codice qui sotto.
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<span id="SpanID"> Old Text </span>
<script type="text/javascript">
Myspan = document.getElementById("SpanID");
Mytxt = document.createTextNode("New text");
Myspan.appendChild(Mytxt);
</script>
</body>
</html>
Produzione:
Old Text New Text
Come puoi vedere nell’output, il nuovo testo è concatenato al vecchio testo.
