javascript - 当我执行单击操作时如何更改元素的位置

Question

所以我正在设计一个应用程序，可以轻松地从维基百科获取结果。现在我首先要做的是，当搜索值输入到搜索栏中并单击搜索图标时，我希望搜索栏向上移动并为传入结果创建空间。是的，我有一些代码，但还没有工作。另外，对维基百科的 API 调用似乎也不起作用，我还需要这方面的帮助。下面是 JavaScript 代码:

$(document).ready(function() {

  let searchValue = document.getElementById("#searchString").value;

  $(".sbutton").on("click", function() {
    // code to push the wrap div element and icon up the container
    $(".wrap").animate({
      marginTop: "5px"
    });

    let baseUrl = " https://en.wikipedia.org/w/api.php? ";
    let tailUrl =
      "action=opensearch&format=jsonfm&search=" + searchValue + "&limit=10";
    let wikiLink = baseUrl + tailUrl;

    $.ajax({
      url: wikiLink,
      type: "GET",
      dataType: "json",
      success: function getWikiData(data) {
        let dDiv = document.createElement("div");
        dDiv = "content";
        dDiv.className = "secondDiv";
document.getElementByClassName("container").append(dDiv);
        for (var i = 0; i < data.opensearch.search.length; i++) {
          $("#content").appendChild(
            "<p>" + data.opensearch.search[2].title + "</p>"
          );
        }
      },

      error: function(error) {
        console.log(error);
      }
    });
  });
});

Answer 1

一种方法是向元素添加一些 css。

$(".wrap").css( "marginTop", "5px" );

在此处了解有关 jQuery css 的更多信息 http://api.jquery.com/css/

确保你也调用了 jQuery，最简单的方法是通过 cdn，在这里: https://cdnjs.com/libraries/jquery/

这里你有工作 fiddle https://jsfiddle.net/6txwmh8L/