• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

The Programming Expert

Solving All of Your Programming Headaches

  • HTML
  • JavaScript
  • jQuery
  • PHP
  • Python
  • SAS
  • Ruby
  • About
You are here: Home / JavaScript / Using the appendChild Method with JavaScript to Add Items to a List

Using the appendChild Method with JavaScript to Add Items to a List

February 9, 2022 Leave a Comment

We can use the appendChild method and JavaScript to add a node to the end of another node.

document.getElementById("list").appendChild(node);

In the code above, appendChild() takes a node and will add it to the end of a list of nodes that we have.

We can create a new node using the Document createElement() method. Let’s take a look at a quick example below.


Let’s say we have the following HTML:

<ul id="list">
  <li>One</li>
  <li>Two</li>
</ul>

If we wanted to add another li element to the list above, we can create a new li element and then add it to the list using the appendChild() method.

var newListItem = document.createElement('li');
newListItem.textContent = "Three";
document.getElementById("list").appendChild(newListItem);

This will add the list item “Three” to the end of this list. Let’s take a look at an interactive example below.

Using the appendChild Method and JavaScript to Add Items to a List

In this example, we will have a simple list as we had above. We will then have an input field below the last that will allow the user to add as many list items to the list as they like.

Here is the HTML setup:

<ul id="theList">
  <li>A list item</li>
  <li>Add any text you like</li>
</ul>
<div id="div1">
  <label for="userinput">Enter a new list item:</label>
  <input type="text" id="new-item" name="userinput">
  <div id="click-me" onclick="updateList()">Add Item</div>
</div>

In this JavaScript code, we will get the user input using the value property and an onclick event. We will then create a new list item using document.createElement method, and then finally we will add the new item to the end of the list using the appendChild() method.

Here is the JavaScript code:

function updateList(){
  var userInput = document.getElementById("new-item").value;
  var newListItem = document.createElement('li');
  newListItem.textContent = userInput;
  document.getElementById("theList").appendChild(newListItem);
};

The final code and output for this example of adding items to a list using appendChild() and JavaScript is below:

Code Output:

  • A list item
  • Add any text you like

Add Item

Full Code:

<ul id="theList">
  <li>A list item</li>
  <li>Add any text you like</li>
</ul>
<div id="div1">
  <label for="userinput">Enter a new list item:</label>
  <input type="text" id="new-item" name="userinput">
  <div id="click-me" onclick="updateList()">Add Item</div>
</div>

<script>

function updateList(){
  var userInput = document.getElementById("new-item").value;
  var newListItem = document.createElement('li');
  newListItem.textContent = userInput;
  document.getElementById("theList").appendChild(newListItem);
};

</script>

Hopefully this article has been useful to help you understand how to add items to a list using the appendChild method and JavaScript.

Other Articles You'll Also Like:

  • 1.  Using JavaScript to Change the Font Size of a Paragraph
  • 2.  Using JavaScript to Round to 1 Decimal
  • 3.  How to Split a Number into Digits in JavaScript
  • 4.  Using JavaScript to Convert a String to Uppercase
  • 5.  Using JavaScript to Set the Width of a Div
  • 6.  outerHTML – How to Get and Change the outerHTML Property of an Element
  • 7.  Using JavaScript to Add Trailing Zeros
  • 8.  How to Check if a Number is Even or Odd in JavaScript
  • 9.  Using JavaScript to Return Two Values
  • 10.  Using JavaScript to Check if Variable is a Function

About The Programming Expert

The Programming Expert is a compilation of a programmer’s findings in the world of software development, website creation, and automation of processes.

Programming allows us to create amazing applications which make our work more efficient, repeatable and accurate.

At the end of the day, we want to be able to just push a button and let the code do it’s magic.

You can read more about us on our about page.

Reader Interactions

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Primary Sidebar

About The Programming Expert

the programming expert main image

Welcome to The Programming Expert. We are a group of US-based programming professionals who have helped companies build, maintain, and improve everything from simple websites to large-scale projects.

We built The Programming Expert to help you solve your programming problems with useful coding methods and functions in various programming languages.

Search

Learn Coding from Experts on Udemy

Looking to boost your skills and learn how to become a programming expert?

Check out the links below to view Udemy courses for learning to program in the following languages:

Copyright © 2023 · The Programming Expert · About · Privacy Policy