Create, Update, Delete and Display List items using JavaScript Object Model (JSOM) in SharePoint Online/2013/2016

December 29, 2021July 5, 2020 by Bhawana Rathore

This JSOM SharePoint tutorial, we will discuss how to create, update and delete list item using JavaScript object model (jsom) in SharePoint Online or SharePoint 2013/2016.

If you are new to SharePoint Online client-side development, then you should know the CRUD operations using JSOM in SharePoint.

Here I have a custom SharePoint Online list which has two columns: Title and Description. But the same code also you can use to create, update and delete list items by using jsom in SharePoint 2013, SharePoint 2016 or SharePoint 2019.

Table of Contents

Create List item using JavaScript Object Model (JSOM) in SharePoint

Now, we will see, how to create a list item using Jsom (JacvaScript object model) in SharePoint Online or SharePoint 2013/2016/2019.

The below jsom code you can write in a script editor web part or also you can use inside a SharePoint hosted add-in or apps.

<script language="javascript" type="text/javascript">
ExecuteOrDelayUntilScriptLoaded(createListItem,'sp.js'); 

function createListItem() {
var clientContext = new SP.ClientContext.get_current();

var list = clientContext.get_web().get_lists().getByTitle('MyCustomList');
var itemInfo = new SP.ListItemCreationInformation();
var listItem = list.addItem(itemInfo);
listItem.set_item('Title', 'Item-1');
listItem.set_item('Description', 'Item-1 Description');
listItem.update();
clientContext.executeQueryAsync(Function.createDelegate(this, this.onQuerySucceeded), Function.createDelegate(this, this.onQueryFailed)
);
}

function onQuerySucceeded() {
alert('Item created successfully !');
}

function onQueryFailed(sender, args) {
alert('Could not able to update item: ' + args.get_message());
}
</script>

Once you run the code, then you can see the list item will be created using jsom like below:

javascript add item to list

The above code we can use to add item to list using javascript in SharePoint.

Insert item to SharePoint list using jsom (dynamically)

In the previous example, we saw how to insert item to SharePoint list using JavaScript. But the data which we were inserting was static.

We can also make it dynamic, here in this example, I have added a textbox and a button and on the button click we are saving the textbox value to the SharePoint list.

The below JSOM code, you can add inside a script editor web part in SharePoint Online or SharePoint 2013/2016 web part page.

<input id="txtTitle" name="txtTitle" type="text" />

<input name="ADD" id="btnAdd" type="submit" value="Add Item to List" />
<script language="javascript" type="text/javascript">

$(document).ready(function () {

$("#btnAdd").click(function () {
var title = $("#txtTitle").val();
AddListItem(title);
});
});
function AddListItem(TitleField) {
var ListName = "Employee";
var context = new SP.ClientContext.get_current();
var lstObject = context.get_web().get_lists().getByTitle(ListName);
var listItemCreationInfo = new SP.ListItemCreationInformation();
var newItem = lstObject.addItem(listItemCreationInfo);
newItem.set_item('Title', TitleField);
newItem.update();
context.executeQueryAsync(Function.createDelegate(this, this.onSuccess),
Function.createDelegate(this, this.onFailure));
}
function onSuccess() {
alert('Item created');
}
function onFailure(sender, args) {
alert('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());
}
</script>

This is how we can insert data to the SharePoint list using javascript object model (jsom) in SharePoint.

Update List item using JavaScript Object Model (JSOM) in SharePoint

Now, we will see how to update the list item using the javascript object model (jsom) code. Here I have taken the list item id hardcoded.

Here we will update the list item whose ID=2.

<script language="javascript" type="text/javascript">
ExecuteOrDelayUntilScriptLoaded(updateListItem,'sp.js'); 

function updateListItem() {
var clientContext = new SP.ClientContext.get_current();
var list = clientContext.get_web().get_lists().getByTitle('MyCustomList');
var listItem = list.getItemById(2);
listItem.set_item('Title', 'Updated List Item Title');
listItem.set_item('Description', 'Updated List Item Description');
listItem.update();
clientContext.executeQueryAsync(Function.createDelegate(this, this.onQuerySucceeded), Function.createDelegate(this, this.onQueryFailed)
);
}

function onQuerySucceeded() {
alert('Item updated successfully !');
}

function onQueryFailed(sender, args) {
alert('Could not able to update item: ' + args.get_message());
}
</script>

Like create list item code, you can also use the update list item code inside a script editor or content editor web part in a web part page in SharePoint.

The output will come like below:

create update and delete list items using javascript object model — javascript update list item

The above code is an example of sharepoint javascript update list item.

Delete List item using JavaScript Object Model (JSOM) in SharePoint

Now, we will see how we can delete a list item using jsom in SharePoint. The same code we can use to delete SharePoint list item using jsom in SharePoint 2013/2016/2019.

Here we will delete the list item whose id =2.

<script language="javascript" type="text/javascript">
ExecuteOrDelayUntilScriptLoaded(deleteListItem,'sp.js'); 

function deleteListItem() {
var clientContext = new SP.ClientContext.get_current();
var list = clientContext.get_web().get_lists().getByTitle('MyCustomList');
var listItem = list.getItemById(2);
listItem.deleteObject();
clientContext.executeQueryAsync(Function.createDelegate(this, this.onQuerySucceeded),Function.createDelegate(this, this.onQueryFailed)
);
}

function onQuerySucceeded() {
alert('Item deleted');
}

function onQueryFailed(sender, args) {
alert('Could not able to delete item: ' + args.get_message());
}

</script>

Once you run the code, you can see the item will be deleted from the SharePoint list. This is how we can delete an item from a SharePoint list using javascript object model.

create update and delete list items using jsom sharepoint — delete list item javascript

The above code will delete a single item, but if you want to delete all items from a SharePoint list, then you can read a tutorial on Different ways to delete all items from SharePoint list.

Display SharePoint list items using JSOM (JavaScript object model)

Now, we will see how to retrieve list items from SharePoint list using the JavaScript object model (jsom) in SharePoint Online Office 365 sites.

The same code also works for SharePoint Online as well as SharePoint 2013/2016.

In this particular example, I have a SharePoint Online list which has columns like:

Title
FirstName
LastName

And in that SharePoint list, there were few records inside it. The out of box list looks like below:

display list items using jsom in SharePoint

Here we will show try to retrieve this list data by using jsom.

Here let us put our jsom code inside a script editor web part or content editor web part, which we will add inside a web part page in SharePoint.

Below is the full jsom code to display SharePoint list using JSOM.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<div id="divListItems"></div>
<script>
$(function () {
ExecuteOrDelayUntilScriptLoaded(retrieveListItems, "sp.js");
});
var collListItem;
function retrieveListItems() {
var clientContext = new SP.ClientContext();
var oList = clientContext.get_web().get_lists().getByTitle('Employees');
var camlQuery = new SP.CamlQuery();
collListItem = oList.getItems(camlQuery);
clientContext.load(collListItem);
clientContext.executeQueryAsync(
Function.createDelegate(this, this.onQuerySucceeded),Function.createDelegate(this, this.onQueryFailed)
);
}

function onQuerySucceeded(sender, args) {
var listItemInfo = ";
var listItemEnumerator = collListItem.getEnumerator();
while (listItemEnumerator.moveNext()) {
var oListItem = listItemEnumerator.get_current();
listItemInfo += '<strong>ID: </strong> ' + oListItem.get_id() +
' <strong>Title:</strong> ' + oListItem.get_item('Title') +
' <strong>FirstName:</strong> ' + oListItem.get_item('FirstName') +
' <strong>LastName:</strong> ' + oListItem.get_item('LastName') +
'<br />';
}
$("#divListItems").html(listItemInfo);
}

function onQueryFailed(sender, args) {
alert('Request failed. ' + args.get_message() +
'\n' + args.get_stackTrace());
}
</script>

If you save the code and refresh the page you can see the list items like below:

display list items using javascript in SharePoint — sharepoint jsom get list items

Here we have passed an empty caml query.

var camlQuery = new SP.CamlQuery();
this.collListItem = oList.getItems(camlQuery);

But if you want to retrieve items based on certain filter conditions then you can write the CAML query and can pass it like below:

var camlQuery = new SP.CamlQuery();
camlQuery.set_viewXml(
'<View><Query><Where><Geq><FieldRef Name=\'ID\'/>' +
'<Value Type=\'Number\'>2</Value></Geq></Where></Query>' +
'<RowLimit>10</RowLimit></View>'
);

var collListItem = oList.getItems(camlQuery);

The above query will return results where the ID value greater than or equal to 2.

This is how we can display SharePoint list items using the JavaScript object model (jsom).

Create SharePoint List using JavaScript (Video Tutorial)

Here, we will create a list using JavaScript using hard code values, as well as I will show how to create an HTML form which will ask the user to provide the list name.

Also, we will create an HTML input form for the users, so that they can create a list in SharePoint.

I have also created a video tutorial and explained step by step how to create a list using javascript object model (jsom) in SharePoint Online.

Subscribe to EnjoySharePoint YouTube Channel for more SharePoint Videos.

Create a List in SharePoint using JavaScript

Below is the JavaScript code which will create a SharePoint list having hardcoded list name. The same code can be used to create a list using javascript in SharePoint 2013/2016/Online.

The code you can add inside a script editor web part or content editor web part in SharePoint web part page.

var list;
function createList() {
var clientContext = new SP.ClientContext('http://SiteURL');
var web = clientContext.get_web();
var listCreationInfo = new SP.ListCreationInformation();
listCreationInfo.set_title('My Custom List');
listCreationInfo.set_description('This is our custom list created by javascript object model');
listCreationInfo.set_templateType(SP.ListTemplateType.custom);
list = web.get_lists().add(listCreationInfo);
clientContext.load(list);
clientContext.executeQueryAsync(
Function.createDelegate(this, this.onQuerySucceeded), Function.createDelegate(this, this.onQueryFailed)
);
}

function onQuerySucceeded() {
var result = list.get_title() + ' successfully created.';
alert(result);
}

function onQueryFailed(sender, args) {
alert('Could not create list: ' + args.get_message());
}

The above javascript code will create a SharePoint custom list name as “My Custom List”.

Create a SharePoint List using JavaScript Object Model

Now we will see how we can create a SharePoint list dynamically, where the list name will be provided by the user. We will create an announcement or a custom list using the JavaScript object model in SharePoint Online or SharePoint 2013/2016.

Here let us take a textbox and a submit button. The user can put a name in the textbox and click on submit to create the list.

Below is the HTML code:

<div>
<strong>Enter List Name:</strong>
<input type="text" id="txtListName" />
<input type="button" id="btnSubmitListName" value="Submit" />
</div>
<div id="divCreateListResults"></div>

JavaScript Object Model Code:

Below is the JavaScript object model code which we can put inside the same script editor web part. Here we are calling the createList() method on the button click.

We can set the list template type by using the SP.ListTemplateType enumeration. Here we have created an announcement list so we have used SP.ListTemplateType.announcements. Similarly, if you want to create a custom list then we can use SP.ListTemplateType.genericList.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(function () {
bindButtonClick();
});
function bindButtonClick() {
$("#btnSubmitListName").on("click", function () {
createList();
});
}

var oList;
function createList() {
var listName = $("#txtListName").val();
var clientContext = new SP.ClientContext();
var oWebsite = clientContext.get_web();
var listCreationInfo = new SP.ListCreationInformation();
listCreationInfo.set_title(listName);
listCreationInfo.set_templateType(SP.ListTemplateType.announcements);
oList = oWebsite.get_lists().add(listCreationInfo);
clientContext.load(oList);
clientContext.executeQueryAsync(
Function.createDelegate(this, this.onQuerySucceeded),Function.createDelegate(this, this.onQueryFailed)
);
}

function onQuerySucceeded() {
var results = oList.get_title() + ' successfully created!';
$("#divCreateListResults").html(results);
}

function onQueryFailed(sender, args) {
alert('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());
}
</script>

Once you Save the code and give a name and click on Submit it will create the list and display the successful message like below:

create list in sharepoint using javascript object model

From Site Contents you can see the SharePoint list like below:

create list in sharepoint using javascript — javascript create list

Create a list in SharePoint using jsom

Here we have a requirement where first we need to bind list templates to a dropdown list and then we will use an HTML form to get user inputs to create SharePoint list using JSOM.

Here we have created separate JS and HTML files. The user will select the Template and give appropriate Display Name and URL and Description.

So first we will create the HTML form and place the HTML controls like a dropdown list for list templates, text boxes for Name, and a button where on clicking a list will be created. On the button click, we will run the JSOM code to create a SharePoint list.

HTML code to create a template Dropdown:

<!DOCTYPE HTML>
<HTML>
<body>
<table>
<tr>
<td>
Template
</td>
<td colspan="4">
<select id="ddltemplate">
</select>
</td>
</tr>
</body>
</html>

Bind List Templates to Dropdown using JSOM

JSOM(JavaScript Object Model) code to bind the drop-down as list template:

var templateCol;
function retrieveListTemplate(){
var clientContext = new SP.ClientContext.get_current();
var web=clientContext.get_web();
templateCol=web.get_listTemplates();
clientContext.load(templateCol);
clientContext.executeQueryAsync(Function.createDelegate(this, this.onQuerySucceeded),
Function.createDelegate(this, this.onQueryFailed));
}
function onQuerySucceeded(sender, args) {
var templateEnumerator=templateCol.getEnumerator();
var option=";
while (templateEnumerator.moveNext()) {
var otemplate=templateEnumerator.get_current();
option+='<option value="'+otemplate.get_listTemplateTypeKind() +'">'+otemplate.get_name() +'</option>';
}
$("#ddltemplate").append(option);
}
function onQueryFailed(sender, args) {
alert('Error: '+args.get_message() +'\n'+args.get_stackTrace());
}

HTML Form (User input controls)

Here as per requirement, we have three textboxes, one dropdown list and a submit button we have also taken a <p> tag to display the success message.

Here we have not added an option to the drop-down list of list template where the user will choose to create the list as per the requirement, because we will bind the dropdown list at page load.

Below is HTML code:

<!DOCTYPE HTML>
<HTML>
<head>
<script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="https://onlysharepoint2013.sharepoint.com/sites/Raju/SiteAssets/Bihusdevelopment2/CreateListUsingJSOM.js"></script>
</head>
<body>
<table>
<tr>
<td>
Display Name
</td>
<td colspan="4">
<input type="text" id="txtDisplayNmae">
</td>
</tr>
<tr>
<td>
URL
</td>
<td colspan="4">
<input type="text"id="txtURL">
</td>
</tr>
<tr>
<td>
Template
</td>
<td colspan="4">
<select id="ddltemplate">
</select>
</td>
</tr>
<tr>
<td>
Description
</td>
<td colspan="4">
<textarea rows="4" cols="22" id="txtDescr"></textarea>
</td>
</tr>
<tr>
<td colspan="3">
</td>
<td>
<td colspan="4">
<input type="button" value="Create" id="btncreate"></input>
</td>
</tr>
</table>
<p id="psuccess" align="center"></p>
</body>
</html>

how to create a list in javascript in sharepoint

JS File ( Get user inputs to create SharePoint List using JSOM)

As discussed in the previous topic we need to bind the list templates to Dropdown on page load first. Then we can get the values from the input controls which the users have entered and create the list. Here we used the button click event to retrieve the control values.

Some SP properties which we came across to retrieve and set the control values from the form to create lists:

This property is used to retrieve the title from the input control and as the title name provided by the user;

.set_title();

Similarly, this property is used to retrieve the desired URL name provided by a user;

.set_url();

This property is used to retrieve the description as provided by the user in the multiline textbox control.

.set_description();

And this property is used to set the template from the user which we have already bind it on page load. Here it retrieves the value of the template.

.set_templateType();

Below code is used to bind the values and create a list.

$(document).ready(function () {

ExecuteOrDelayUntilScriptLoaded(retrieveListTemplate, "sp.js");
$("#btncreate").click(function(){
createlist();
});
});
var templateCol;
function retrieveListTemplate(){
var clientContext = new SP.ClientContext.get_current();
var web=clientContext.get_web();
templateCol=web.get_listTemplates();
clientContext.load(templateCol);
clientContext.executeQueryAsync(Function.createDelegate(this, this.onQuerySucceeded),
Function.createDelegate(this, this.onQueryFailed));
}
function onQuerySucceeded(sender, args) {
var templateEnumerator=templateCol.getEnumerator();
var option=";
while (templateEnumerator.moveNext()) {
var otemplate=templateEnumerator.get_current();
option+='<option value="'+otemplate.get_listTemplateTypeKind() +'">'+otemplate.get_name() +'</option>';
}
$("#ddltemplate").append(option);
}
function onQueryFailed(sender, args) {
alert('Error: '+args.get_message() +'\n'+args.get_stackTrace());
}
function createlist(){
var displayname=$("#txtDisplayNmae").val();
var url=$("#txtURL").val();
var template=$('#ddltemplate :selected').val();
var description=$("#txtDescr").val();
var clientContext=newSP.ClientContext.get_current();
var web=clientContext.get_web();
var listcreation=newSP.ListCreationInformation();
listcreation.set_title(displayname);
listcreation.set_url(url);
listcreation.set_description(description);
listcreation.set_templateType(template);
var list=web.get_lists().add(listcreation);
clientContext.load(list);
clientContext.executeQueryAsync(Function.createDelegate(this, this.onsuccess), Function.createDelegate(this, this.onfailed));
}
function onsuccess() {
$('#psuccess').html("List Created Successfully");
}
function onfailed(sender, args) {
alert('Creation Failed'+args.get_message() +'\n'+args.get_stackTrace());
}

Here we can see after entering required field data and clicking on creating a list is created with a success message as “List Created Successfully”.

how to create a list in javascript

We can see in the Site Contents that a list is created as “ProductSamples” as entered while creating the list from the form.

create a sharepoint list

Delete list in SharePoint using javascript

Now, we will see how to delete SharePoint list using JavaScript client object model with a hardcoded list name.

var listTitle;
var list;
function deleteList(siteUrl) {
var clientContext = new SP.ClientContext(siteUrl);
var web = clientContext.get_web();
listTitle = 'MyCustomList';
list = web.get_lists().getByTitle(listTitle);
list.deleteObject();
clientContext.executeQueryAsync(
Function.createDelegate(this, this.onQuerySucceeded),Function.createDelegate(this, this.onQueryFailed)
);
}

function onQuerySucceeded() {
var result = listTitle + ' deleted successfully';
alert(result);
}

function onQueryFailed(sender, args) {
alert('Could not able to delete list: ' + args.get_message());
}

Once you run the above code, it will delete the SharePoint list whose name is MyCustomList from the SharePoint Online/2013/2016 site.

Delete SharePoint List using JavaScript Object Model

Now we will see how we can delete a list by using JavaScript Object Model in SharePoint Online/2013/2016. Here also we will take a textbox and a button to do the operation. The user can put a name in the textbox and click on Delete button to delete the list.

Below is our HTML code:

<div>
<strong>Enter List Name to Delete:</strong>
<input type="text" id="txtListName" />
<input type="button" id="btnSubmitListName" value="Delete" />
</div>
<div id="divDeleteListResults"></div>

JavaScript Object Model Code:

Here we are calling the deleteList() method on the button click. And we are using jQuery to get the list title from the textbox. And we are calling the getByTitle() method to delete the list.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(function () {
bindButtonClick();
});
function bindButtonClick() {
$("#btnSubmitListName").on("click", function () {
deleteList();
});
}

var oList ;
function deleteList() {
var listName = $("#txtListName").val();
var clientContext = new SP.ClientContext();
var oWebsite = clientContext.get_web();
oList = oWebsite.get_lists().getByTitle(listName);
oList.deleteObject();
clientContext.executeQueryAsync(
Function.createDelegate(this, this.onQuerySucceeded),Function.createDelegate(this, this.onQueryFailed)
);
}

function onQuerySucceeded() {
$("#divDeleteListResults").html("List successfully deleted!");
}

function onQueryFailed(sender, args) {
alert('Request failed. ' + args.get_message() +'\n' + args.get_stackTrace());
}
</script>

Now when you Save the code and put list title in the textbox and click on the button then it will delete the list and it will show the successful message. It looks like below:

delete list in sharepoint using javascript — delete sharepoint list javascript

This SharePoint tutorial, we learned how to create a SharePoint list using JavaScript in SharePoint Online or SharePoint 2013/2016. We also saw how to delete a list using jsom (javascript object model) in SharePoint Online/2013/2016.

You may also like the following SharePoint jsom tutorials:

Get Current User Details Using JavaScript Object Model (jsom) and jQuery in SharePoint 2013/2016/Online
Uncaught TypeError: Cannot read property get_current of undefined error sharepoint online jsom
SharePoint crud operations using jsom (JavaScript Object Model)
[Solved] Uncaught TypeError: SP.ClientContext is not a constructor in SharePoint Online JSOM (JavaScript object model)
SharePoint Online: Add/Delete custom actions from Site Actions menu using JavaScript Object Model (jsom)
How to Use CAML Query for Boolean field for SharePoint 2013/2016/Online Object Model CSOM
Different ways to delete all items from SharePoint list
Display SharePoint list data in HTML table using JavaScript

In this SharePoint tutorial, we discussed:

How to create list item using jsom in SharePoint.
How to update list item using the javascript object model in SharePoint Online or SharePoint 2013/2016/2019.
How to delete list item by item id using jsom in SharePoint?
How to display SharePoint list item using JSOM in SharePoint.
get sharepoint list items using javascript client object model

Bhawana Rathore

Bhawana Rathore is a Microsoft MVP (3 times in Office Apps & Services) and a passionate SharePoint Consultant, having around 10 years of IT experience in the industry, as well as in .Net technologies. She likes to share her technical expertise in EnjoySharePoint.com and SPGuides.com

[…] Execute the script to create the SharePoint list […]

[…] can also check, Create, Update and Delete List items using JavaScript Object Model (JSOM) in SharePoint […]