How to append an AJAX reply

I searched the site and surprisingly did not find any answers fitting my situation. So I posted this question.

I am using jQuery AJAX to fetch a web page and dynamically add it to the website. But my code does not work and throws an error ERROR TypeError: "data.append is not a function".

My code is:

 $.ajax({
      url: "http://localhost:3000/treeviewuser/testuser",
      beforeSend: function( xhr ) {
        xhr.overrideMimeType( "text/plain; charset=x-user-defined" );
      }
    })
      .done(function( data ) {
        if ( console && console.log ) {
          console.log( "Sample of data:", data.slice( 0, 100 ) );
          data.append(data);
        }
      });
  }); 

To further elabourate on my comment, data is the response returned from the endpoint, which does not have the .append() method. Based on your response, you intend to print the output to the document. There are two ways to do this:

##1. Create a new element with the text, and append to document

If you do not have a target element on the page you want to append the data to, you can simply create a new element and set its inner text to the data returned from the server:

$.ajax({
	url: "http://localhost:3000/treeviewuser/testuser",
	beforeSend: function( xhr ) {
		xhr.overrideMimeType( "text/plain; charset=x-user-defined" );
	}
}).done(function( data ) {
	const el = document.createElement('div');
	el.innerText = data;

    document.appendChild(el);
});

If you're more comfortable writing in jQuery, you can also do this:

$.ajax({
	url: "http://localhost:3000/treeviewuser/testuser",
	beforeSend: function( xhr ) {
		xhr.overrideMimeType( "text/plain; charset=x-user-defined" );
	}
}).done(function( data ) {
	const $el = $('<div />', {
		text: data
	});

	$(document).append($el);
});

##2. Append text to a pre-existing element

Let's say you have an element with the ID of output that you want to print the response to, i.e. <div id="output"></div>, then you can do this:

$.ajax({
	url: "http://localhost:3000/treeviewuser/testuser",
	beforeSend: function( xhr ) {
		xhr.overrideMimeType( "text/plain; charset=x-user-defined" );
	}
}).done(function( data ) {
	$('#output').text(data);
}); 

You need to find the element where you want to append the response data.
$("#my_div_id").append(data[0]) instead of data.append(data);
If your data is an array or an array of objects, you'll need to loop through each of them when appending; else when the data you return from your ajax is in a type of text or html, you can just directly append it on your document. $("#my_div_id").append(data)