Мне нужно было изменить несколько вещей в вашем коде (небольшие ошибки тоже).Но мне удалось добиться того, что вы хотите сделать с fetch .
buttonEL = document.getElementById("button");
resultEL = document.getElementById("result");
buttonEL.addEventListener("click", searchgif);
function searchgif() {
var url = "https://b682nc9ec1.execute-api.us-east-1.amazonaws.com/dev/giphy/search?search=";
var searched = document.getElementById("search").value;
var api = url + searched;
var firstres = api.replace(/[|]|"/g, "");
var res = firstres.split(",");
fetch(res, {method: 'GET', headers: {Accept: 'application/json'} })
.then(function(response) {
response.json()
.then(function(text) {
for ( let i = 0; i <= text.length - 1 ; i++) {
var img = document.createElement("img");
img.setAttribute("src", text[i]);
resultEL.appendChild(img);
}
});
});
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Load gif and images</title>
</head>
<body>
<header>
<h1>Search for gifs</h1>
</header>
<!--Section with input for search-->
<section id="for-search">
<form>
<input type="text" name="search" placeholder="type your text here" class="search" id="search">
</form>
<button id="button">SUBMIT</button>
</section>
<!--END search section-->
<!--Section to display gifs for searched word-->
<section id="layout">
<div id="result">
</div>
</section>
<!--END display section-->
</body>
</html>
Наслаждайтесь!