JavaScript Alterar Texto

JavaScript Alterar Texto

  1. Alterar o texto de um elemento usando a propriedade textContent em JavaScript
  2. 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.

Author: Ammar Ali
Ammar Ali avatar Ammar Ali avatar

Hello! I am Ammar Ali, a programmer here to learn from experience, people, and docs, and create interesting and useful programming content. I mostly create content about Python, Matlab, and Microcontrollers like Arduino and PIC.

LinkedIn Facebook

Artigo relacionado - JavaScript Text

  • Copiar texto para a área de transferência em JavaScript