JavaScript Alterar Texto
-
Alterar o texto de um elemento usando a propriedade
textContentem JavaScript -
Alterar o texto de um elemento usando a função
createTextNode()em JavaScript
Este tutorial irá discutir como alterar o texto de um elemento usando a propriedade textContent e a função createTextNode() em JavaScript.
Alterar o texto de um elemento usando a propriedade textContent em JavaScript
Se você deseja substituir o texto antigo de um elemento por algum texto novo, você precisa obter esse elemento usando seu id ou nome de classe e, em seguida, pode substituir o texto antigo pelo novo texto usando a propriedade textContent. Se um id ou nome de classe não for especificado, você pode usar o atributo id ou class para dar ao elemento um id ou nome de classe. Certifique-se de que o id ou o nome da classe seja exclusivo; caso contrário, qualquer elemento com o mesmo id também será alterado. Por exemplo, vamos criar um elemento de texto usando a tag span e alterar seu texto usando a função textContent em JavaScript. Veja o código abaixo.
<!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>
Resultado:
New Text
O código JavaScript é colocado dentro do arquivo HTML no código acima, mas você pode separá-los se quiser. Você também pode especificar a condição na qual o texto deve ser alterado, como clicar em um botão. Se você não deseja substituir o texto, mas anexar algum texto novo com o texto antigo, você pode usar o método abaixo.
Alterar o texto de um elemento usando a função createTextNode() em JavaScript
Se você deseja anexar o novo texto com o texto antigo, você precisa obter esse elemento usando seu id ou nome de classe e, em seguida, usando a função createTextNode(), você pode criar um nó do novo texto e usando o método appendChild()Função você pode anexar o novo texto com o texto antigo. Se um id ou nome de classe não for especificado, você pode usar o atributo id ou class para dar ao elemento um id ou nome de classe. Certifique-se de que o id ou o nome da classe seja exclusivo; caso contrário, qualquer elemento com o mesmo id também será alterado. Por exemplo, vamos criar um elemento de texto usando a tag span e anexar seu texto usando a função createTextNode() em JavaScript. Veja o código abaixo.
<!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>
Resultado:
Old Text New Text
Como você pode ver na saída, o novo texto é concatenado com o texto antigo.
