Write jQuery code to append a div element (and all of its contents) dynamically to the body element. Insert the following code within HTML <body> tag : HTML Code : JavaScript Code : Live Demo: See the Pen jquery-core-exercise-6 by w3resource (@w3resource) on CodePen. Contribute your code and comments through Disqus. Previous: Check/uncheck a checkbox input or radio button.jQuery core : Exercise-6 with Solution
Solution :
Next: Write a jQuery Code to get a single element from a selection.
What is the difficulty level of this exercise?
Easy Medium HardTest your Programming skills with w3resource's quiz.
Follow us on Facebook and Twitter for latest update.
- Weekly Trends
- Java Basic Programming Exercises
- SQL Subqueries
- Adventureworks Database Exercises
- C# Sharp Basic Exercises
- SQL COUNT() with distinct
- JavaScript String Exercises
- JavaScript HTML Form Validation
- Java Collection Exercises
- SQL COUNT() function
- SQL Inner Join
- JavaScript functions Exercises
- Python Tutorial
- Python Array Exercises
- SQL Cross Join
- C# Sharp Array Exercises
Examples
Append an item to a list:
const node = document.createElement("li");
const textnode = document.createTextNode("Water");
node.appendChild(textnode);
document.getElementById("myList").appendChild(node);
Move an item from one list to another:
const node = document.getElementById("myList2").lastElementChild;
document.getElementById("myList1").appendChild(node);
More examples below.
Definition and Usage
The appendChild() method appends a node (element) as the last child of an element.
Syntax
element.appendChild(node)
orParameters
ParameterDescriptionnodeRequired.The node to append.
Return Value
TypeDescriptionNodeThe appended node.More Examples
To create a paragraph with a text.
- Create a paragraph element
- Create a text node
- Append the text node to the paragraph
- Append the paragraph to the document.
Create a
element and append it to a
element:
const para = document.createElement("p");
const node = document.createTextNode("This is a paragraph.");
para.appendChild(node);
document.getElementById("myDIV").appendChild(para);
Create a
element and append it to the document's body:
const para = document.createElement("P");
const node = document.createTextNode("This is a paragraph.");
para.appendChild(node);
document.body.appendChild(para);
Browser Support
element.appendChild() is a DOM Level 1 (1998) feature.
It is fully supported in all browsers:
ChromeEdgeFirefoxSafariOperaIEYesYesYesYesYes9-11To append using the innerHTML attribute, first select the element (div) where you want to append the code. Then, add the code enclosed as strings using the += operator on innerHTML.
Syntax:
element.innerHTML += "additional HTML code"or
element.innerHTML = element.innerHTML + "additional HTML code"Example:
html
<!DOCTYPE html>
<html>
<head>
element.innerHTML = element.innerHTML + "additional HTML code"1<element.innerHTML = element.innerHTML + "additional HTML code"3>
element.innerHTML = element.innerHTML + "additional HTML code"5element.innerHTML = element.innerHTML + "additional HTML code"6
element.innerHTML = element.innerHTML + "additional HTML code"1element.innerHTML = element.innerHTML + "additional HTML code"8element.innerHTML = element.innerHTML + "additional HTML code"3>
element.innerHTML = element.innerHTML + "additional HTML code"1<elementInsideDiv.insertAdjacentHTML('afterend', 'additional HTML code');3>
elementInsideDiv.insertAdjacentHTML('afterend', 'additional HTML code');5elementInsideDiv.insertAdjacentHTML('afterend', 'additional HTML code');6
elementInsideDiv.insertAdjacentHTML('afterend', 'additional HTML code');7elementInsideDiv.insertAdjacentHTML('afterend', 'additional HTML code');8
elementInsideDiv.insertAdjacentHTML('afterend', 'additional HTML code');9
elementInsideDiv.insertAdjacentHTML('afterend', 'additional HTML code');7<!DOCTYPE html>1
elementInsideDiv.insertAdjacentHTML('afterend', 'additional HTML code');5<!DOCTYPE html>3
elementInsideDiv.insertAdjacentHTML('afterend', 'additional HTML code');5<!DOCTYPE html>5
elementInsideDiv.insertAdjacentHTML('afterend', 'additional HTML code');7<!DOCTYPE html>7
elementInsideDiv.insertAdjacentHTML('afterend', 'additional HTML code');5<!DOCTYPE html>3
element.innerHTML = element.innerHTML + "additional HTML code"1element.innerHTML = element.innerHTML + "additional HTML code"8elementInsideDiv.insertAdjacentHTML('afterend', 'additional HTML code');3>
element.innerHTML = element.innerHTML + "additional HTML code"8head>
<<9>
element.innerHTML = element.innerHTML + "additional HTML code"1<html3 html4html5html6>
elementInsideDiv.insertAdjacentHTML('afterend', 'additional HTML code');5<>0>1>0>
elementInsideDiv.insertAdjacentHTML('afterend', 'additional HTML code');5<>6>
>8>9
elementInsideDiv.insertAdjacentHTML('afterend', 'additional HTML code');5element.innerHTML = element.innerHTML + "additional HTML code"8>6>
element.innerHTML = element.innerHTML + "additional HTML code"1element.innerHTML = element.innerHTML + "additional HTML code"8html3>
element.innerHTML = element.innerHTML + "additional HTML code"1<<1 <2html5<4<5<1>
element.innerHTML = element.innerHTML + "additional HTML code"1<head0>
elementInsideDiv.insertAdjacentHTML('afterend', 'additional HTML code');5head3
elementInsideDiv.insertAdjacentHTML('afterend', 'additional HTML code');7head5
elementInsideDiv.insertAdjacentHTML('afterend', 'additional HTML code');7head7head8head9head8element.innerHTML = element.innerHTML + "additional HTML code"01
elementInsideDiv.insertAdjacentHTML('afterend', 'additional HTML code');5<!DOCTYPE html>3
element.innerHTML = element.innerHTML + "additional HTML code"1element.innerHTML = element.innerHTML + "additional HTML code"8head0>
element.innerHTML = element.innerHTML + "additional HTML code"8<9>
element.innerHTML = element.innerHTML + "additional HTML code"8html>
Output:
Note: This method basically destroys all the content of the div and recreates it. So, if you have any listeners attached to the child nodes of that div, they will be lost.
Using the insertAdjacentHTML() method:
HTML code can be appended to a div using the insertAdjacentHTML() method. However, you need to select an element inside the div to add the code. This method takes two parameters:
- The position (in the document) where you want to insert the code (‘afterbegin’, ‘beforebegin’, ‘afterend’, ‘beforeend’)
- The HTML code you want to insert enclosed in quotes
Syntax:
elementInsideDiv.insertAdjacentHTML('afterend', 'additional HTML code');HTML
<!DOCTYPE html>
<html>
<head>
element.innerHTML = element.innerHTML + "additional HTML code"1<element.innerHTML = element.innerHTML + "additional HTML code"3>
element.innerHTML = element.innerHTML + "additional HTML code"5element.innerHTML = element.innerHTML + "additional HTML code"28
element.innerHTML = element.innerHTML + "additional HTML code"1element.innerHTML = element.innerHTML + "additional HTML code"8element.innerHTML = element.innerHTML + "additional HTML code"3>
element.innerHTML = element.innerHTML + "additional HTML code"1<elementInsideDiv.insertAdjacentHTML('afterend', 'additional HTML code');3>
elementInsideDiv.insertAdjacentHTML('afterend', 'additional HTML code');5elementInsideDiv.insertAdjacentHTML('afterend', 'additional HTML code');6
elementInsideDiv.insertAdjacentHTML('afterend', 'additional HTML code');7elementInsideDiv.insertAdjacentHTML('afterend', 'additional HTML code');8
elementInsideDiv.insertAdjacentHTML('afterend', 'additional HTML code');7<!DOCTYPE html>1
elementInsideDiv.insertAdjacentHTML('afterend', 'additional HTML code');5<!DOCTYPE html>3
element.innerHTML = element.innerHTML + "additional HTML code"1<!DOCTYPE html>5
elementInsideDiv.insertAdjacentHTML('afterend', 'additional HTML code');5element.innerHTML = element.innerHTML + "additional HTML code"48
elementInsideDiv.insertAdjacentHTML('afterend', 'additional HTML code');5<!DOCTYPE html>3
element.innerHTML = element.innerHTML + "additional HTML code"1element.innerHTML = element.innerHTML + "additional HTML code"8elementInsideDiv.insertAdjacentHTML('afterend', 'additional HTML code');3>
element.innerHTML = element.innerHTML + "additional HTML code"8head>
<<9>
element.innerHTML = element.innerHTML + "additional HTML code"1<html3 html4html5html6>
elementInsideDiv.insertAdjacentHTML('afterend', 'additional HTML code');5<>0>1>0>
elementInsideDiv.insertAdjacentHTML('afterend', 'additional HTML code');5<>6 html4html5element.innerHTML = element.innerHTML + "additional HTML code"80>
elementInsideDiv.insertAdjacentHTML('afterend', 'additional HTML code');5element.innerHTML = element.innerHTML + "additional HTML code"83>6>
element.innerHTML = element.innerHTML + "additional HTML code"1element.innerHTML = element.innerHTML + "additional HTML code"8html3>
element.innerHTML = element.innerHTML + "additional HTML code"1<<1 <2html5<4<5<1>
element.innerHTML = element.innerHTML + "additional HTML code"1<head0>
elementInsideDiv.insertAdjacentHTML('afterend', 'additional HTML code');5head3
elementInsideDiv.insertAdjacentHTML('afterend', 'additional HTML code');7elementInsideDiv.insertAdjacentHTML('afterend', 'additional HTML code');07
elementInsideDiv.insertAdjacentHTML('afterend', 'additional HTML code');08head7head8head9head8elementInsideDiv.insertAdjacentHTML('afterend', 'additional HTML code');13
elementInsideDiv.insertAdjacentHTML('afterend', 'additional HTML code');5<!DOCTYPE html>3
element.innerHTML = element.innerHTML + "additional HTML code"1element.innerHTML = element.innerHTML + "additional HTML code"8head0>
element.innerHTML = element.innerHTML + "additional HTML code"8<9>
element.innerHTML = element.innerHTML + "additional HTML code"8html>
OUTPUT:
Note: You should never insert the HTML code in this way if you are taking it as input from the user. It opens your website to cross-site scripting vulnerabilities.
JavaScript is best known for web page development but it is also used in a variety of non-browser environments. You can learn JavaScript from the ground up by following this JavaScript Tutorial and JavaScript Examples.