如何在javascript中显示来自Giphy的图像

下面的代码正在从Giphy提取数据。我试图让用户搜索一个术语并在页面上显示图像。我目前有一个图像显示，它正在创建一个按钮的cookie轨迹，允许用户返回并单击他们以前看到的图像。我需要遍历并为从console.log（数据）返回的每个图像url显示一个图像。我可以获取数据以在控制台中显示图像URL，但不能为每个URL创建按钮。感谢您的帮助

                <div class="wrapper">
                    <div class="container">
                        <div id="animalButtons"></div>

                            <form class="input-append">
                                <div id="field">
                                    <input class="input" id="formValueId" type="text" placeholder="Type something"/>
                                    <input type="button" class="myButton" value="Search" />
                                </div>
                            </form>

                            <div id="field1"></div>
                        <div id="searchResults"></div>
                    </div>
                </div>


          function buttonFeature(value){
              request.open('GET', 'http://api.giphy.com/v1/gifs/search?api_key=dc6zaTOxFJmzC&q='+value, true);
              request.send('GET', 'http://api.giphy.com/v1/gifs/search?api_key=dc6zaTOxFJmzC&q='+value, true);
          };


          document.addEventListener('DOMContentLoaded', function () {
          $(document).ready(function() {

              $('.myButton').click(function(e) {
              var searchFeature = ($('#formValueId').val());
              request = new XMLHttpRequest;
              request.open('GET', 'http://api.giphy.com/v1/gifs/search?api_key=dc6zaTOxFJmzC&q='+searchFeature, true);


              var next = 1;

              var searchFeature = ($('#formValueId').val());

              //console.log(searchFeature);

                e.preventDefault();
                var addto = "#field" + next;
                next = next + 1;
                var newIn = '<button id="newButton" value='+searchFeature+' onclick="buttonFeature(this.value)">'+searchFeature+'</button>';
                var newInput = $(newIn);
                $(addto).after(newInput);


              request.onload = function() {
                for (var i = 0; i <= 10; i++) {
                  data = JSON.parse(request.responseText).data[i].images.fixed_height.url;
                  console.log(data);
                  document.getElementById("searchResults").innerHTML = '<center><img src = "'+data+'"  title="GIF via Giphy"></center><br>';
                }
              };
              request.onerror = function() {
                console.log('connection error');
              };
              request.send();
              });
            });
          });

功能按钮功能（值）{
request.open（'GET'，'http://api.giphy.com/v1/gifs/search?api_key=dc6zaTOxFJmzC&q=“+值，正确）；
request.send（'GET'，'http://api.giphy.com/v1/gifs/search?api_key=dc6zaTOxFJmzC&q=“+值，正确）；
};
document.addEventListener（'DOMContentLoaded'，函数（）{
$（文档）.ready（函数（）{
$（'.myButton'）。单击（函数（e）{
var searchFeature=（$（'#formValueId'）.val（）；
请求=新的XMLHttpRequest；
request.open（'GET'，'http://api.giphy.com/v1/gifs/search?api_key=dc6zaTOxFJmzC&q=“+搜索功能，正确）；
var-next=1；
var searchFeature=（$（'#formValueId'）.val（）；
//console.log（searchFeature）；
e、 预防默认值（）；
var addto=“#字段”+下一步；
下一个=下一个+1；
var newIn=''+searchFeature+''；
var newInput=$（newIn）；
$（添加到）.之后（新输入）；
request.onload=函数（）{
对于（var i=0；i而不是每次循环时替换图像的innerHTML，我使用Jquery，如$（“#searchResults”）.append（'Rating:'+Rating+''）

                <div class="wrapper">
                    <div class="container">
                        <div id="animalButtons"></div>

                            <form class="input-append">
                                <div id="field">
                                    <input class="input" id="formValueId" type="text" placeholder="Type something"/>
                                    <input type="button" class="myButton" value="Search" />
                                </div>
                            </form>

                            <div id="field1"></div>
                        <div id="searchResults"></div>
                    </div>
                </div>


          function buttonFeature(value){
              request.open('GET', 'http://api.giphy.com/v1/gifs/search?api_key=dc6zaTOxFJmzC&q='+value, true);
              request.send('GET', 'http://api.giphy.com/v1/gifs/search?api_key=dc6zaTOxFJmzC&q='+value, true);
          };


          document.addEventListener('DOMContentLoaded', function () {
          $(document).ready(function() {

              $('.myButton').click(function(e) {
              var searchFeature = ($('#formValueId').val());
              request = new XMLHttpRequest;
              request.open('GET', 'http://api.giphy.com/v1/gifs/search?api_key=dc6zaTOxFJmzC&q='+searchFeature, true);


              var next = 1;

              var searchFeature = ($('#formValueId').val());

              //console.log(searchFeature);

                e.preventDefault();
                var addto = "#field" + next;
                next = next + 1;
                var newIn = '<button id="newButton" value='+searchFeature+' onclick="buttonFeature(this.value)">'+searchFeature+'</button>';
                var newInput = $(newIn);
                $(addto).after(newInput);


              request.onload = function() {
                for (var i = 0; i <= 10; i++) {
                  data = JSON.parse(request.responseText).data[i].images.fixed_height.url;
                  console.log(data);
                  document.getElementById("searchResults").innerHTML = '<center><img src = "'+data+'"  title="GIF via Giphy"></center><br>';
                }
              };
              request.onerror = function() {
                console.log('connection error');
              };
              request.send();
              });
            });
          });