How to Append HTML Tags of Content Editor Webpart using JavaScript in SharePoint

Introduction

I know when we use a screen saver or a slider in our home page, we have to hard code our URLs for images or videos in our sliders to get it working.

Here, I bring you a new concept of doing it without hardcoding the values.

I know it’s tricky, but I learnt the trick and soon you will too.

• Here, you see below is an example of HTML code which we place in a content editor web part:
  HTML

  <table cellpadding="0" cellspacing="0" class="slidingshell" style="width:25%;">
  <tr>
  <td>
  <a id="videoimg"  ></a>
  </td>
  </tr>
  </table>
  <h2>
  <a id="videotitle" ></a>
  </h2>
  <h3>
  <p id ="videodescription"></p></br>
  <a id="clickurl"></a>
  </h3>
  </div>
  <!-- .slide--> 

• Prepare a SharePoint Custom List where you can have columns for Video/Image URL, a Title column and a Description column.
• Go to the page where you have placed the following HTML code.
• Add a JavaScript file there shown as below:
  JavaScript

  $(document).ready(function() {
   
  var i=1;
   //Query your custom list here
  var query1 = "<Query><OrderBy><FieldRef Name='ID' Ascending='TRUE'/></OrderBy></Query>";

  Assign the variables to an array, so that you don’t have to call it everytime.

  JavaScript

  var valuedes=[];
  var valuetitle=[];
  var valueimgurl=[];
  var valuevideourl=[];
  var valueassettype=[];
  
  //Call SP Services to get all data from the list
  $().SPServices({
                  operation: "GetListItems",
                  listName: "CAROUSEL",
                  async: false,
                  CAMLQuery: query1,        
                  completefunc: function (xData, Status) {
                  alert(xData.responseText);
  var test1 = xData.responseText;
  data1 = $.parseXML(test1),
  $test1 = $(data1);
                                 
                  $(test1).find("z\\:row").each(function(){
   
   
          valuedescription[i]=$(this).attr("ows_Description");
                  valuetitle[i]=$(this).attr("ows_LinkTitle");       
          valueimgurl[i]=$(this).attr("ows_Preview_x0020_Picture_x0020_URL");
          valueimgurl[i]=valueimgurl[i].split(",")[0];
                  valuevideourl[i]=$(this).attr("ows_Asset_x0020_URL");
          valuevideourl[i]=valuevideourl[i].split(",")[0];
   
   
        //It will start looping for all the IDs present in the group
  i=i+1; 
          }); 
      } 
  }); 
   
  var val1=[];
  var val2=[];
  var val3=[];
  var val4=[];
  var val5=[];
   
  for(var j=1;j<=i;j++)
  { 
  val1[j]="<a id=\"videoimg"+j+"\" href=\"" + valuevideourl[j]+ "\" 
  target=\"_blank\"><img src=\"" + valueimgurl[j] + "\"  /></a>";
  val2[j]= "<a id=\"videotitle"+j+"\" href=\""+ valuevideourl[j] +"\" 
  target=\"_blank\"> \""+ valuetitle[j] + "\"</a>";
  val3[j] = "<p id =\"videodescription"+j+"\">\""+ valuedescription[j] +
  "\"<a href=\""+ valuevideourl[j] +"\"  target=\"_blank\"></a></p>";
  val4[j] ="<a id=\"heading"+j+"\" href=\"#\">"+ valuetitle[j] +"</a>";
  }
  // Here the below code  will append the HTML coding automatically, 
  // you need not everytime change the url and other details for every change in your Home Page.
   
  $('#videoimg').html(val1[1]);
  $('#videotitle').html(val2[1]);
  $('#videodescription').html(val3[1]);
  $('#clickurl').html(val5[1]);
  });

It will resolve lot of concerns especially of the clients to pay the developers every time for making the HTML changes to their home page so now they can change it on a list using simple form and the result will come up directly on the home page without even touching the code.

For developers, it will save lot of time especially which they don’t have any.