Texto de cambio de JavaScript
-
Cambiar el texto de un elemento usando la propiedad
textContenten JavaScript -
Cambiar el texto de un elemento usando la función
createTextNode()en JavaScript
Este tutorial discutirá cómo cambiar el texto de un elemento usando la propiedad textContent y la función createTextNode() en JavaScript.
Cambiar el texto de un elemento usando la propiedad textContent en JavaScript
Si desea reemplazar el texto antiguo de un elemento con un texto nuevo, necesita obtener ese elemento usando su id o nombre de clase, y luego puede reemplazar el texto antiguo con el nuevo texto usando la propiedad textContent. Si no se especifica un id o un nombre de clase, puede usar el atributo id o class para darle al elemento un id o un nombre de clase. Asegúrese de que la identificación o el nombre de la clase sean únicos; de lo contrario, también se cambiará cualquier elemento que tenga el mismo id. Por ejemplo, creemos un elemento de texto usando la etiqueta span y cambiemos su texto usando la función textContent en JavaScript. Vea el código a continuación.
<!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>
Producción :
New Text
El código JavaScript se coloca dentro del archivo HTML en el código anterior, pero puede separarlos si lo desea. También puede especificar la condición en la que se debe cambiar el texto, haciendo clic en un botón. Si no desea reemplazar el texto pero agregar un texto nuevo con el texto anterior, puede usar el método siguiente.
Cambiar el texto de un elemento usando la función createTextNode() en JavaScript
Si desea agregar el nuevo texto con el texto anterior, debe obtener ese elemento usando su id o nombre de clase y luego usando la función createTextNode(), puede crear un nodo del nuevo texto y usando el appendChild()Función puede agregar el texto nuevo con el texto anterior. Si no se especifica un id o un nombre de clase, puede usar el atributo id o class para darle al elemento un id o un nombre de clase. Asegúrese de que la identificación o el nombre de la clase sean únicos; de lo contrario, también se cambiará cualquier elemento que tenga el mismo id. Por ejemplo, creemos un elemento de texto usando la etiqueta span y agreguemos su texto usando la función createTextNode() en JavaScript. Vea el código a continuación.
<!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>
Producción :
Old Text New Text
Como puede ver en la salida, el texto nuevo está concatenado con el texto anterior.
