Advance JavaScript (DOM, BOM, Web API) / Document Object Model

Manipulating Elements - Part 2

✅ after() - insert a node after an element.

🔹 What is after()?

  • after() is a DOM method of the Element interface.

  • It inserts one or more nodes immediately after a selected element in the DOM.

✏️ Syntax

element.after(node);
element.after(node1, node2, ...nodeN);
element.after(text1, text2, ...textN);

👉 Key Points

  • Inserts content after the element itself, not inside it.

  • Accepts:

    • DOM nodes (elements)

    • Strings (treated as text nodes)

  • Returns: undefined

  • Throws HierarchyRequestError if insertion is invalid.

1️⃣ Insert a single element

<h1>Hello World</h1>

<script>
  const h1 = document.querySelector('h1');

  const p = document.createElement('p');
  p.textContent = 'Inserted using after()';

  h1.after(p);
</script>
<h1>Hello World</h1>
<p>Inserted using after()</p>

📌 The <p> is added after the <h1>.

2️⃣ Insert multiple elements

<ul>
  <li>Angular</li>
  <li>Vue</li>
</ul>

<script>
  const ul = document.querySelector('ul');

  const items = ['React', 'Meteor', 'Polymer'].map(text => {
    const li = document.createElement('li');
    li.textContent = text;
    return li;
  });

  ul.lastElementChild.after(...items);
</script>
<ul>
  <li>Angular</li>
  <li>Vue</li>
  <li>React</li>
  <li>Meteor</li>
  <li>Polymer</li>
</ul>

📌 Multiple nodes are inserted after the last <li>.

3️⃣ Insert text using after()

<button>Donate</button>

<script>
  const btn = document.querySelector('button');
  btn.firstChild.after(' 🧡');
</script>
Donate 🧡

📌 Strings are automatically converted to text nodes.

✅append() – insert a node after the last child node of a parent node.

🔹 What is append()?

  • append() is a DOM method used to add content inside an element, after its last child.

  • It works on parent nodes.

✏️ Syntax

parentNode.append(node);
parentNode.append(node1, node2, ...nodeN);
parentNode.append(text1, text2, ...textN);

👉 Key Points

  • Appends content at the end of an element.

  • Accepts:

    • DOM nodes (elements)

    • Strings (converted to text nodes)

  • Can insert multiple items at once

  • Returns: undefined

1️⃣ Append elements to a parent

✏️ HTML

<ul id="app">
  <li>JavaScript</li>
</ul>

🧠 JavaScript

const app = document.querySelector('#app');

const langs = ['TypeScript', 'HTML', 'CSS'];

const nodes = langs.map(lang => {
  const li = document.createElement('li');
  li.textContent = lang;
  return li;
});

app.append(...nodes);
<ul id="app">
  <li>JavaScript</li>
  <li>TypeScript</li>
  <li>HTML</li>
  <li>CSS</li>
</ul>

📌 All <li> elements are added inside <ul> at the end.

2️⃣ Append text to an element

✏️ HTML

<div id="app"></div>

🧠 JavaScript

const app = document.querySelector('#app');
app.append('append() Text Demo');
// behind the scend converts to document.createTextNode("append () Text Demo")

console.log(app.textContent);
<div id="app">append() Text Demo</div>

📌 Strings are automatically converted to text nodes.

🔁 append() vs appendChild()

Feature

append()

appendChild()

Return value

undefined

Appended node

Accepts multiple items

✅ Yes

❌ No

Accepts text

✅ Yes

❌ No

Modern & flexible

✅ Yes

⚠️ Older

✅ prepend() – insert a node before the first child node of a parent node.

🔹 What is prepend()?

  • prepend() is a DOM method used to add content inside an element, before its first child.

  • It works on parent nodes.

✏️ Syntax

parentNode.prepend(node);
parentNode.prepend(node1, node2, ...nodeN);
parentNode.prepend(text1, text2, ...textN);

👉 Key Points

  • Inserts content at the beginning of an element.

  • Accepts:

    • DOM nodes (elements)

    • Strings (automatically converted to text nodes)

  • Can insert multiple items at once

  • Returns: undefined

1️⃣ Prepend elements to a parent

✏️ HTML

<ul id="app">
  <li>HTML</li>
</ul>

🧠 JavaScript

const app = document.querySelector('#app');

const langs = ['CSS', 'JavaScript', 'TypeScript'];

const nodes = langs.map(lang => {
  const li = document.createElement('li');
  li.textContent = lang;
  return li;
});

app.prepend(...nodes);
<ul id="app">
  <li>CSS</li>
  <li>JavaScript</li>
  <li>TypeScript</li>
  <li>HTML</li>
</ul>

📌 New <li> elements are added before the existing first item.

2️⃣ Prepend text to an element

✏️ HTML

<div id="app"></div>

🧠 JavaScript

const app = document.querySelector('#app');
app.prepend('prepend() Text Demo');

console.log(app.textContent);
<div id="app">prepend() Text Demo</div>

📌 Text is automatically converted into a Text node and added at the start.

🔁 prepend() vs append()

Method

Inserts

prepend()

Inside element, at the start

append()

Inside element, at the end