Inserção de texto, HTML ou elementos em posições adjacentes usando JavaScript

Inserindo Texto em Posições Adjacentes

Vamos começar com a inserção de texto nas posições adjacentes. Podemos fazer isso com a ajuda do insertAdjacentText() método. Este método aceita dois parâmetros.

O primeiro parâmetro determina a posição do nó de texto em relação ao elemento. O valor do parâmetro deve ser uma string e pode ter um dos quatro valores a seguir:

1. beforebegin — Isso inserirá o nó de texto logo antes do próprio elemento.
2. afterbegin — Isso inserirá o nó de texto dentro do elemento antes de seu primeiro filho.
3. beforeend — Isso inserirá o nó de texto apenas dentro do elemento, mas após o último filho.
4. afterend — Isso inserirá o nó de texto logo após o próprio elemento.

O segundo parâmetro também é uma string que representa o valor real do nó de texto que você deseja inserir. Aqui está um trecho de código simples que obtém o valor de texto de um input elemento e, em seguida, coloca-o nas posições especificadas:

1

let p_elem = document.querySelector("p.my-para");

2

let input_elem = document.querySelector("input");

3

let text_wrapper = document.querySelector("div.text-wrapper");

4

let c_node = document.querySelector("span.c-node");

5

6

c_node.textContent = text_wrapper.childNodes.length;

7

8

document.querySelector(".bb").addEventListener("click", () => {

9

  p_elem.insertAdjacentHTML('beforebegin', input_elem.value);

10

  c_node.textContent = text_wrapper.childNodes.length;

11

});

12

13

document.querySelector(".ab").addEventListener("click", () => {

14

  p_elem.insertAdjacentText('afterbegin', input_elem.value);

15

  c_node.textContent = text_wrapper.childNodes.length;

16

});

A seguinte demonstração do CodePen mostra a inserção de texto em posições adjacentes em ação.

Uma coisa interessante a se notar aqui é que o número total de nós filhos permanece o mesmo quando o texto é inserido usando depois de começar e antes de terminar como valores de posição. Isso ocorre porque esse texto é inserido dentro de um elemento ou nó existente.

Por outro lado, o texto adicionado usando antes de começar e depois de terminar valores de posição resultam em um aumento no número total de nós filhos. Cada pressionamento de botão resulta na criação de um novo nó, em vez de o texto ser adicionado aos nós de texto existentes.

É importante ter em mente que você pode inserir conteúdo no antes de começar e depois de terminar posições somente se o elemento chamador também tiver um elemento pai.

Inserindo HTML em Posições Adjacentes

Você pode usar o insetAdjacentHTML() método se desejar inserir algum texto como HTML ou XML em vez de texto simples. Os nós resultantes são inseridos na árvore DOM em posições especificadas.

As posições onde você pode inserir o HTML são as mesmas que discutimos na seção anterior—beforebegin, afterbegin, beforeende afterend.

Uma vantagem do insertAdjacentHTML() método é que ele não analisa novamente o elemento de chamada, o que o torna muito mais rápido do que usar innerHTML para atualizar o HTML. Usando insertAdjacentHTML() também evita a corrupção de qualquer HTML existente dentro do elemento de chamada.

Usar este método para inserir HTML em uma página pode ser um risco de segurança. Portanto, você deve ter certeza de que a entrada do usuário foi escapada e limpa. É possível que usuários mal-intencionados injetem scripts nocivos na página da Web se você não for cuidadoso.

Embora seja tentador usar insertAdjacentHTML() para inserir marcações e texto simples, você deve considerar o uso insertAdjacentText() se você pretende inserir texto simples. Isto é porque insertAdjacentHTML() passará algum tempo analisando a string passada enquanto insertAdjacentText() irá inseri-lo como string bruta.

Considere o seguinte exemplo onde a string bruta é inserida em beforebegin enquanto o analisado etiqueta é inserida afterend.

1

let p_elem = document.querySelector("p.my-para");

2

3

p_elem.insertAdjacentText("beforebegin", "Hello, Tyrion Lannister");

4

p_elem.insertAdjacentHTML("afterend", "Hello, Tyrion Lannister");

1

let p_elem = document.querySelector("p.my-para");

2

let input_elem = document.querySelector("input");

3

let p_count = document.querySelector("div.text-wrapper").getElementsByTagName("p");

4

let c_node = document.querySelector("span.c-node");

5

6

c_node.textContent = p_count.length;

7

8

document.querySelector(".bb").addEventListener("click", () => {

9

  let temp_para = document.createElement("p");

10

  temp_para.textContent = input_elem.value;

11

  p_elem.insertAdjacentElement('beforebegin', temp_para);

12

13

  c_node.textContent = p_count.length;

14

});

15

16

document.querySelector(".ab").addEventListener("click", () => {

17

  let temp_span = document.createElement("span");

18

  temp_span.textContent = input_elem.value;

19

  p_elem.insertAdjacentElement('afterbegin', temp_span);

20

21

  c_node.textContent = p_count.length;

22

});