getElementById函数$（＃...）无法正常工作

Question

除以下事项外，我有以下页面工作。它找不到ID为“ result_set”的元素（div）。但是设置它的“ html”属性确实可以。我不明白WTF ...所有其他元素都工作正常。

我需要.appendChild（）到该节点，但会引发“无功能”错误。但是我可以同时设置“ html”。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<form id='main-form' method="POST">

  <input id="cmd-data" type="submit" value="Обновить">

</form>

<br>

<div id="result_set">result goes here</div>

$(document).ready(function() {

  $("#main-form").submit(function() {

    //         $("#loading").show().fadeIn('slow');

    //           $("#result_set").hide().fadeOut('slow');

    var frm = $('#main-form');

    var vname = $("#tracking-id").val();

    $.ajax({

      type: frm.attr('method'),

      url: 'dataPage.php',

      data: '{"call_method": "method_name"}',

      success: function(data) {

        data = JSON.parse(data);

        data = JSON.parse(data[1]);

        str_buf = "";

        //           var new_table = document.createElement("table");

        //           $("#result_set").appendChild(new_table);

        var hdr_done = false;

        data.forEach(function(element) {

          //                   var new_row = document.createElement("tr");

          //                   new_table.appendChild(new_row);

          let sub_str_buf = "";

          if (!hdr_done) {

            for (let val of Object.keys(element)) {

              sub_str_buf += "<th>" + val + "</th>";

            }

            str_buf += "<tr>" + sub_str_buf + "</tr>";

            hdr_done = true;

          }

          sub_str_buf = "";

          for (let val of Object.values(element)) {

            sub_str_buf += "<td>" + val + "</td>";

          }

          str_buf += "<tr>" + sub_str_buf + "</tr>";

          $("#result_set").slideDown();

        });

        // Next string works

        $("#result_set").html("<table>" + str_buf + "</table>");

        // Next string fails with "id() is not a function". ANY DOMElement function here will fail.

        console.log($("#result_set").id());

      },

Answer 1

答案很简单。通用JS中的.getElementById（）和jQuery中的$（＃..）相同。但是第一个返回DOMElement，第二个返回jQuery对象。这就是为什么您不能调用appendChild（）的原因。只需调用jQuery方法.append（）或appendTo（）即可。