SharePoint: Move the “Add New” Link to the Top of the Web Part Using Javascript or JQuery

Steps to make this change on only one page:

  1. Open Notepad and paste in the JavaScript from below
  2. Save the Notepad file with a name like “MoveAddNewItem.html”
  3. Upload this Notepad file to a library such as “Site Assets”, “Site Files” or other library
  4. Go to that library, right-click this file and copy the Shortcut (the URL to the file)
  5. Add a Content Editor Web Part below the last web part on the page, edit this web part, and paste the URL you just copied into the Content Link box.
  6. Save your changes and test the result

Steps to make this change for all pages:

  1. Using SharePoint Designer, edit your master page
  2. Add the JavaScript below just before the </BODY> tag


The JavaScript


  • The Try Catch is to deal with the picture library and the calendar, which do not add the “add new” links
  • If you are modifying the code, you will want to remove the Try Catch during your testing
  • The test for “ms-bottompaging” is for long lists that are displaying a previous / next links
  • The line that starts with “theTable = x” is one long line  ( theTable = x[i]…… )
// Find all tables
var x = document.getElementsByTagName("TABLE"); 
var ListList = "";

for (var i=x.length-1; i>0; i-- ) 
  // find just the tables that are list web parts (have a "summary" element)
  if (x[i].summary)
    try {
      // Now find the "add new" rows
      var theTable = x[i].parentNode.parentNode.parentNode.parentNode.nextSibling;
      // but if the table is the paging table (next / previous) then get the next table
      if (theTable.innerHTML.indexOf("ms-bottompaging") > 0)
        theTable = x[i].parentNode.parentNode.parentNode.parentNode.nextSibling.nextSibling.nextSibling;

      // hide the unneeded horizontal line
      // hide the extra blank space

      // move the table    
      var theContainer = x[i].parentNode.parentNode.parentNode.parentNode.parentNode;
    catch (err123) {}


Using JQuery :

<script src="_/DocLib/jquery/1.4.2/jquery.min.js" type="text/javascript">  
 <script language=”javascript” type=“text/javascript”>

$(document).ready(function () {

$(““).parent().parent().parent().each(function () {


});  });


Leave a Reply

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