Проблема добавления getJSON в конце моей веб-страницы

Question

Я застрял в течение нескольких дней с проблемой, которая, на мой взгляд, очень проста для всех.

В настоящее время я работаю над созданием моей собственной "фальшивой" профессиональной веб-страницы с помощью глюк Мне удалось поместить все, что я хотел, используя HTML, и я стилизовал его, используя CSS. Пока все хорошо, это выглядит как настоящая веб-страница.

В конце этой веб-страницы я хочу разместить раздел "свяжитесь с нами", и вот тут-то и будет сложно. Я хочу использовать Javascript и RANDOM USER GENERATOR для репликации профессионалов, с которыми могут связаться зрители. У каждого профессионала (всего 10) есть изображение, и, наведя мышку на каждый профиль, зрители могут увидеть его имя и фамилию (возможно, я добавлю номер телефона и адрес электронной почты позже) профессионала.

Я довольно подробно описал эту часть, вот мой код professional.js:

$.getJSON( "https://randomuser.me/api/?results=10", function( json ) {
console.log( json ); // print data in the console
var users = json.results; // results is an array of users

// store the "body" of our document inside a jQuery object
var body = $( "body" );

// loop through each user in our "users" array
for( var i = 0; i< users.length; i = i + 1 ) {
// store the current user in a variable
var user = users[ i ];

// we create a container for the user image and its data
var imgContainer = $( "<div class='img-container'></div>" );

// we create a jQuery object with an "img" element
var img = $( "<img>" );
// set its "src" attribute with a jquery method
img.attr( "src", user.picture.large );
// and append this element to our container
imgContainer.append( img );

// we create a jQuery object with a new paragraph 
var userData = $( "<p class='user-data'></p>" );
// set its inner HTML with jQuery
userData.html( user.name.first + "<br>" + user.name.last );
// and append this to our container
imgContainer.append( userData );

// finally we append the container to the "body" of our document
body.append( imgContainer );
}
} );

Вот стиль, используемый с CSS:

* {
margin: 0;
padding: 0;
}

body {
background: black;
text-align: center;
line-height: 0;
}

.img-container {
display: inline-block;
position: relative;
overflow: hidden;
cursor: pointer;
}

.user-data {
position: absolute;
bottom: 0;
left: -120%;
width: 100%;
height: 50px;
background: rgba( 0, 0, 0, 0.3 );

padding-left: 10px;
text-align: left;
color: white;
font-family: sans-serif;
font-size: 20px;
line-height: 24px;

transition: left 0.3s ease-in;
}

.img-container:hover .user-data {
left: 0;
}

Проблема в том, что когда я пытаюсь "импортировать" мой java в мой документ, он "стирает" мою веб-страницу. Это похоже на то, как оно поднимается над ним и скрывает весь контент. Я думаю, что проблема связана с тем, что мой файл.js добавляет содержимое в "тело" моей веб-страницы (body.append( imgContainer);).

Итак, мой вопрос, как я могу добавить свой проект.js, используя getJSON, на мою веб-страницу, не стирая все. Я хочу добавить его в самом низу моей веб-страницы. Это кажется глупым, но я искал четыре часа и не мог найти ответ.

Спасибо заранее.