Getting SharePoint List items using jQuery

Getting SharePoint List items using jQuery

Create a list name: FAQs

Add some data.

Copy below code in  a .txt file

<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>

<script type="text/javascript">
$(document).ready(function() {alert('1');
var soapEnv =
"<soapenv:Envelope xmlns:soapenv='http://schemas.xmlsoap.org/soap/envelope/'> \
<soapenv:Body> \
<GetListItems xmlns='http://schemas.microsoft.com/sharepoint/soap/'> \
<listName>FAQs</listName> \
<viewFields> \
<ViewFields> \
<FieldRef Name='Title' /> \
</ViewFields> \
</viewFields> \
</GetListItems> \
</soapenv:Body> \
</soapenv:Envelope>";

$.ajax({
url: "_vti_bin/lists.asmx",
type: "POST",
dataType: "xml",
data: soapEnv,
complete: processResult,
contentType: "text/xml; charset=\"utf-8\""
});
});

function processResult(xData, status) {alert('2');
$(xData.responseXML).find("z\\:row").each(function() {
var liHtml = "<li>" + $(this).attr("ows_Title") + "</li>";
$("#tasksUL").append(liHtml);
});
}
</script>

<ul id="tasksUL"/>

Upload .txt file in to sharepoint server

go to any page.

Insert content editor web part

Edit web part

provide .txt link at: To link to a text file, type a URL.

Save

you will get list items.

Add dynamic Div using jQuery

Add dynamic Div using jQuery

Append at End of div

$($('.MyClass')[0]).parent().append($('<div>').text("Good Bye"));  

The above code will append "Good Bye" text div, to the class which is having name as: MyClass

You can search by Id also

Ex:$($('#MyDivID')[0]).parent().append($('<div>').text("Good Bye"));  

Above div will append in the End

Append at Start

How to append Div in the starting

Below code will add Welcome text in the starting of MyDivID div

$('<div id="newdiv">').text("Welcome").insertBefore($($('#MyDivID')[0]));

If you want to add image to div

$('#newdiv').prepend('<img" src="http://google.com/path/to/image.jpg" />');

Append at End of div
var newDiv = '<div><img src="img1.gif" alt="hi"/>Hi</div>';
$($('.myclass')[0]).append(newDiv);

Append at Start
var newDiv = '<div id="newDiv"><img src="img1.gif" alt="hi"/>Hi</div>';
$($('.myclass')[0]).before(newDiv );