In order to my last post “SharePoint List CRUD Operation using PowerShell Management”. I am going to help you in learning how to do basic SharePoint List operations (CRUD – Create, Read, Update and Delete) using JavaScript.

Create SharePoint List item

function createSPListItem() {
        var listName = "DemoList"; //Give your list name
        var clientContext = new SP.ClientContext.get_current(); 
        var oWeb = clientContext.get_web();
        var oList = oWeb.get_lists().getByTitle(listName);

        var itemCreateInfo = new SP.ListItemCreationInformation();
        this.oListItem = oList.addItem(itemCreateInfo);
        this.oListItem.set_item("Title", "Test-Item-2");
        this.oListItem.set_item("DemoLocation", "India");
        this.oListItem.set_item("ProjectName", "CSR-RL-09");
        this.oListItem.update();

        clientContext.load(this.oListItem);
        clientContext.executeQueryAsync(
            Function.createDelegate(this, successHandler),
            Function.createDelegate(this, errorHandler)
        );

        function successHandler() {
            alert('Item ' + this.oListItem.get_id() + 'created sucessfully!');
        }

        function errorHandler() {
            alert("Request failed: " + arguments[1].get_message());
        }
    }

Read SharePoint List item

    function readSPList() {
        var listName = "DemoList"; //Give your list name
        var clientContext = new SP.ClientContext.get_current();
        var oWebsite = clientContext.get_web();
        var oList = oWebsite.get_lists().getByTitle(listName);
        var camlQuery = new SP.CamlQuery();
        // set_viewXml function to define a CAML query and return items that meet specific criteria.
        // you can write caml query into below line
        camlQuery.set_viewXml('<View><RowLimit>100</RowLimit></View>');
        // The getItems(query) function enables you to define a Collaborative Application Markup Language (CAML) query that specifies which items to return
        this.collListItem = oList.getItems(camlQuery);

        clientContext.load(this.collListItem, "Include(Title, DemoLocation, ProjectName)");
        clientContext.executeQueryAsync(
            Function.createDelegate(this, successHandler),
            Function.createDelegate(this, errorHandler)
        );

        function successHandler() {
            var listItemInfo;
            var listItemEnumerator;

            listItemEnumerator = this.collListItem.getEnumerator();

            listItemInfo = "";
            while (listItemEnumerator.moveNext()) {
                var oListItem = listItemEnumerator.get_current();
                listItemInfo += "Title: " + oListItem.get_item('Title') + "<br/>" +
                "Location: " + oListItem.get_item('DemoLocation') + "<br/>" +
                "Project Name: " + oListItem.get_item('ProjectName') + "<br/>";
            }

            alert(listItemInfo);
        }

        function errorHandler() {
            resultpanel.innerHTML = "Request failed: " + arguments[1].get_message();
        }
    }
	

Update SharePoint List item

    function updateSPListItem() {
        var listName = "DemoList"; //Give your list name
        var clientContext = new SP.ClientContext.get_current();
        var oWeb = clientContext.get_web();
        var oList = oWeb.get_lists().getByTitle(listName);

        this.oListItem = oList.getItemById(1);
        this.oListItem.set_item("Title", "Test-Item-03");
        this.oListItem.set_item("DemoLocation", "SIG");
        this.oListItem.set_item("ProjectName", "NDR-PO-09");
        this.oListItem.update();

        clientContext.load(this.oListItem);
        clientContext.executeQueryAsync(
            Function.createDelegate(this, successHandler),
            Function.createDelegate(this, errorHandler)
        );

        function successHandler() {
            alert('Item ' + this.oListItem.get_id() + 'updated sucessfully!');
        }

        function errorHandler() {
            alert("Request failed: " + arguments[1].get_message());
        }
    }
	

Delete SharePoint List item

    function deleteSPListItem() {
        var listName = "DemoList"; //Give your list name
        var clientContext = new SP.ClientContext.get_current();
        var oWeb = clientContext.get_web();
        var oList = oWeb.get_lists().getByTitle(listName);

        this.oListItem = oList.getItemById(1);
        this.oListItem.deleteObject();

        clientContext.executeQueryAsync(
            Function.createDelegate(this, successHandler),
            Function.createDelegate(this, errorHandler)
        );

        function successHandler() {
            alert('Item ' + this.oListItem.get_id() + 'deleted sucessfully!');
        }

        function errorHandler() {
            alert("Request failed: " + arguments[1].get_message());
        }
    }