How do I append ajax data on preexisting tag with same name

See more:

Javascript

Ajax

jQuery

forms

When the page loads, the desired section (i.e the section I intend loading content into) is emptied but console.log clearly shows that x carries content and simply refuses to give it up.

What I have tried:

The form is posted to this same page and the page is returned with the same markup but processed data from the submitted form.
The code is such as

$.post(url, $('form').serialize(), function (data) {
	var h = $('<div/>').html(data), x = $('body').append(h).find($('div section'))
	console.log(x, x.text())
	
	$('main > section').empty().append(x);

	h.remove();
})

$('[name="bio_submit"]').click(); // auto submit form on load
// manually submitting the form produces the same result also

I've tried find()ing other elements instead of section, like I've tried section descendants and also other tags existing on the page, even the footer; they all get appended but for some strange reason, section refuses to comply.
I've also tried unwrapping x and passing its outer HTML unto section using append function signature. It doesn't work either. How do I go about it?