As atualizações de JavaScript vêm com métodos e recursos novos e aprimorados. Um desses novos recursos é o substituir com() método. O JavaScript é suportado em todos os navegadores da Web e a maioria das funções ou métodos de JavaScript são funcionais nesses navegadores, com exceção do Internet Explorer. JavaScript é famoso por criar soluções novas e mais eficientes para vários problemas. O substituir com() é exatamente isso, um novo método que é muito melhor do que a abordagem trivial

O que é substituir () método

O substituir com() o método é usado para substituir um elemento \ nó de Dom (Modelo de objeto de documento) com outro elemento \ nó. Agora, você também pode pensar por que precisamos de um método separado para uma tarefa que possa ser facilmente realizada usando a abordagem tradicional de JavaScript. Bem, para colocar em palavras simples, o substituir com() Os métodos permitem que os usuários substituam os elementos, referenciando diretamente os nós filhos. Anteriormente, tínhamos que nos referir ao nó pai e depois ao nó da criança para substituir o nó filho.

O substituir com() O método é suportado por todos os navegadores da web modernos, exceto o Internet Explorer. Você pode obter o suporte para o Internet Explorer, mas precisará de um Polyfil.

Sintaxe
A sintaxe de substituir com() O método é o seguinte:

OldNode.substituir (newNode);

OldNode: O elemento ou o nó que deve ser substituído
NEWNODE: O nó ou elemento que substituirá o nó antigo

Você também pode anexar vários nós usando o substituir com() Método como assim:

OldNode.substitua (newNode1, newNode2, newNode3…);

Agora, sabemos a sintaxe do substituir com() método, sabemos o que deveria fazer, mas ainda não sabemos como usá -lo. Então, vamos tentar usá -lo com um exemplo.

Exemplo
Crie um arquivo HTML com as seguintes linhas dentro do marcação.

Tutorial Linuxhint

Método substituir () em JavaScript

Este é um texto aleatório a ser substituído

Clique para substituir o nó

Vamos passar pelo trecho de código e explicar algumas coisas:

• Criamos uma etiqueta "centro" e colocamos tudo dentro dela para centralizá -la na página.
• Nós criamos um “div"Com o id"demonstração”.
• Dentro de div, nós temos uma "p”Tag com algum texto dentro dele.
• Criamos um botão fora do div Para substituir o texto dentro do p Tag no clique deste botão e o vinculou à função “btnclick ()”.

Vamos executar a página HTML e é assim que parece:

Vamos criar a parte JavaScript do tutorial.

Primeiro, criamos a função “btnclick ()", debaixo de tag de script ou em um arquivo de script diferente.

função btnclick ()
// Coloque os comandos posteriores aqui

Para mudar o

marcação ou seus nós filhos, primeiro precisamos obter sua referência assim que o botão for pressionado. Para obter a referência do

marcação que está dentro do Tag, usamos um seletor de consulta. Desde o div tem o id = “demonstração” Usamos o seguinte comando:

const pTag = documento.QuerySelector ("#Demo P");

Agora precisamos de um elemento que substitua o const newInput = documento.createElement ("entrada");
newInput.value = "substituiu o nó antigo";

Agora que criamos um elemento para substituir o

tag com, vamos realmente substituí -lo usando o substituir com() Método usando o seguinte snippet de código:

ptag.substituir (newInput);

Por fim, se quisermos remover o botão também da tela. Para fazer isso:

const btn = documento.getElementById ("btn");
btn.remover();

O trecho de código completo ficaria assim:

função btnclick ()
const pTag = documento.QuerySelector ("#Demo P");
const newInput = documento.createElement ("entrada");
newInput.value = "substituiu o nó antigo";
ptag.substituir (newInput);
const btn = documento.getElementById ("btn");
btn.remover();

Execute o arquivo HTML e você verá este resultado:

Agora para verificar se o

marcação foi realmente substituído, podemos fazer isso verificando o código -fonte com as ferramentas do desenvolvedor.

No começo, é assim:

Depois de clicar no botão, fica assim:

Como você pode ver, o

marcação é totalmente substituído pelo marcação, Quando pressionamos o botão e agora há apenas a etiqueta de entrada dentro do “#Demo div”.

Anexando vários nós

Também podemos usar o substituir com() Método para inserir vários nós em substituição para o nó antigo. Separar vários nós com uma vírgula ",".

No exemplo atual, vamos tentar adicionar um nó de texto simples junto com a tag de entrada usando o comando:

ptag.substituir (newInput, "hello");

Observação: Se escrevermos apenas uma string, ela criará automaticamente um nó de texto.

Saída:

Substituindo apenas ChildNodes pelo Método Substituir ()

Uma das principais características de substituir com() é substituir os ChildNodes diretamente. Suponha que não queremos remover completamente o

marcação Do exemplo acima. Talvez, queremos remover o conteúdo dentro do

marcação e insira um Tag em negrito com algum texto no

marcação. Podemos fazer isso referenciando os Childnodes do

marcação.

Primeiro, vamos criar a etiqueta ousada com:

const newChildNode = documento.createElement ("b");
newChildNode.textContent = "Eu sou uma etiqueta em negrito e o novo ChildNode";

Agora, vamos substituir o primeiro nó filho do

tag usando a sintaxe da matriz como:

ptag.Childnodes [0].substituir (newChildNode);

Execute o código e a saída é a seguinte:

Vamos examinar o código -fonte da opção de ferramentas do desenvolvedor do navegador para verificar se o

não foi totalmente removido em vez do Tag em negrito e seu conteúdo foi adicionado dentro do

Agora, como você pode ver claramente, substituímos com sucesso o nó infantil do

marcação e adicionou outra tag dentro dele como seu nó filho. É isso para o substituir com() método.

Conclusão

O substituir com() é um método realmente útil em JavaScript que pode ser usado para substituir nós e elementos por novos nós e elementos. Essa abordagem é definitivamente melhor do que a abordagem tradicional de JavaScript de se referir ao nó filho usando a referência do nó pai, isso significa que precisamos obter a referência do nó pai também. Aprendemos a sintaxe e o trabalho do substituir com() Método, juntamente com exemplos e confirmou a substituição olhando o código -fonte dentro das ferramentas de desenvolvedor do navegador.