Inserting Textual content, HTML or Components at Adjoining Positions Utilizing JavaScript

There are lots of DOM manipulation tutorials on Tuts+ that train you the way to do a wide range of issues akin to discovering the dad and mom, kids or siblings of a component. We even have a tutorial that teaches you the way to insert, substitute or take away baby components in JavaScript. This tutorial will present you the way to insert textual content, HTML or components at adjoining positions utilizing JavaScript.

Inserting Textual content at Adjoining Positions

Let’s start with the insertion of textual content at adjoining positions. We will do that with the assistance of the insertAdjacentText() technique. This technique accepts two parameters.

The primary parameter determines the place of the textual content node relative to the component. The parameter worth must be a string and it could possibly have one of many following 4 values:

1. beforebegin — It will insert the textual content node simply earlier than the component itself.
2. afterbegin — It will insert the textual content node simply contained in the component earlier than its first baby.
3. beforeend — It will insert the textual content node simply contained in the component however after the final baby.
4. afterend — It will insert the textual content node simply after the component itself.

The second parameter can be a string which represents the precise textual content node worth that you just wish to insert. Right here is an easy code snippet that will get the textual content worth from an enter component after which locations it at specified positions:

1

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

2

let input_elem = doc.querySelector("enter");

3

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

4

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

5

6

c_node.textContent = text_wrapper.childNodes.size;

7

8

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

9

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

10

  c_node.textContent = text_wrapper.childNodes.size;

11

});

12

13

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

14

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

15

  c_node.textContent = text_wrapper.childNodes.size;

16

});

The next CodePen demo exhibits the insertion of textual content at adjoining positions in motion.

One fascinating factor to notice right here is that the whole variety of baby nodes keep the identical when the textual content is inserted utilizing afterbegin and beforeend as place values. It is because that textual content is inserted inside an current component or node.

However, the textual content added utilizing beforebegin and afterend place values leads to a rise within the complete variety of baby nodes. Every button press leads to creation of 1 new node as a substitute of the textual content getting added to current textual content nodes.

It is very important understand that you may insert content material on the beforebegin and afterend positions provided that the calling component additionally has a component dad or mum.

Inserting HTML at Adjoining Positions

You should use the insetAdjacentHTML() technique if you wish to insert some textual content as HTML or XML as a substitute of plain textual content. The ensuing nodes are inserted into the DOM tree at specified positions.

The positions the place you may insert the HTML are the identical ones we mentioned within the earlier part—beforebegin, afterbegin, beforeend, and afterend.

One benefit of the insertAdjacentHTML() technique is that it doesn’t reparse the calling component which makes it lots quicker than utilizing innerHTML to replace the HTML. Utilizing insertAdjacentHTML() additionally prevents corruption of any current HTML contained in the calling component.

Utilizing this technique to insert HTML right into a web page is usually a safety threat. Due to this fact, you need to make certain that the consumer enter has been escaped and sanitized. It’s attainable for malicious customers to inject dangerous scripts into the webpage in case you are not cautious.

Whereas it’s tempting to make use of insertAdjacentHTML() to insert each markup in addition to plain textual content, you must think about using insertAdjacentText() in case you plan to insert plain textual content. It is because insertAdjacentHTML() will spend a while parsing the handed string whereas insertAdjacentText() will insert it as uncooked string.

Think about the next instance the place the uncooked string is inserted at beforebegin whereas the parsed <b> tag is inserted afterend.

1

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

2

3

p_elem.insertAdjacentText("beforebegin", "<b>Hiya, Tyrion Lannister</b>");

4

p_elem.insertAdjacentHTML("afterend", "<b>Hiya, Tyrion Lannister</b>");

You may see it in motion within the following CodePen demo:

Insert an Factor at Adjoining Positions

There may be yet one more related technique known as insertAdjacentElement() that you should use to insert a given component node at specified place with respect to the calling component.

The worth of place parameter would be the very same for this technique because the earlier two strategies — beforebegin, afterbegin, beforeend, and afterend.

The return worth of this technique is the component that was inserted. It would return null if the insertion failed.

Here’s a little code snippet that takes some textual content enter from an enter component and wraps it in span tags when inserting on the beforebegin place. The textual content is wrapped inside p tags when inserting on the afterbegin place.

1

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

2

let input_elem = doc.querySelector("enter");

3

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

4

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

5

6

c_node.textContent = p_count.size;

7

8

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

9

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

10

  temp_para.textContent = input_elem.worth;

11

  p_elem.insertAdjacentElement('beforebegin', temp_para);

12

13

  c_node.textContent = p_count.size;

14

});

15

16

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

17

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

18

  temp_span.textContent = input_elem.worth;

19

  p_elem.insertAdjacentElement('afterbegin', temp_span);

20

21

  c_node.textContent = p_count.size;

22

});

You may see it in motion within the following CodePen demo:

Ultimate Ideas

On this tutorial, we realized about three completely different strategies that you should use to insert textual content, HTML or components at specified positions relative to the dad or mum component. It’s best to use all the time use insertAdjacentText() to insert textual content strings for higher efficiency. Equally, insertAdjacentElement() can be often quicker while you wish to insert an precise current component into the DOM tree.

One benefit of utilizing insertAdjacentHTML() is that you would be able to merely cross it a string that it’s going to parse to insert the suitable nodes into the DOM. Utilizing insertAdjacentHTML() is way less complicated if you wish to insert sophisticated markup.