如何拉取由 javascript 函数创建的元素的 innerHTML

Question

问题：

我有一个 ID 为 "tableholder" 的 div 元素，它纯粹是为了将输出保存在 javascript 函数上，该函数通过 ajax 从 PHP 文件。

在 tableholder 元素中，是一个 list.js table，如果我们简单地包含他 php 文件而不是通过 ajax 调用它，它就可以工作并通过 innerHTML = "".

进行设置

如何使用动态创建的 tableholder div 的 innerHTML 的内容？

目前代码：

PHP 文件调用：

    <?php

// Connection details for the database being called.
include 'connection.php';

// Putting the query to the database in a variable called "$assets".
$assets = "SELECT * FROM assetregister.getassets";
$assetPull = $conn->query($assets);
$output = "";

// Pulling all of the details from the database and displaying them on the page within the inidividual divs.
if ($assetPull->num_rows > 0) {
    $output .= "<div id='users'>";
    $output .= "<input class='search form-control mt-2' placeholder='Search...' />";
    $output .= "<div class='m-2'>";
    $output .= "<button class='sort btn' data-sort='model'>Sort By Model</button>";
    $output .= "<button class='sort btn ml-2' data-sort='domain'>Sort By Domain</button>";
    $output .= "<button class='sort btn ml-2' data-sort='location'>Sort By Location</button>";
    $output .= "</div>";
    $output .= "<table class='table table.hover list'>";
    $output .= "<thead>";
    $output .= "<th style='text-align: center;'>Model</th>";
    $output .= "<th style='text-align: center;'>Serial Number</th>";
    $output .= "<th style='text-align: center;'>Asset Number</th>";
    $output .= "<th style='text-align: center;'>Domain</th>";
    $output .= "<th style='text-align: center;'>Location</th>";
    $output .= "<th style='text-align: center;'>Type</th>";
    $output .= "</thead>";
    while ($row = $assetPull->fetch_assoc()) {
        $output .= "<tbody class='list' style='text-align: center;'>";
        $output .= "<td class='model'>" . $row['modelName'] . "</td>";
        $output .= "<td class='serialNumber'>" . $row['serialNumber'] . "</td>";
        $output .= "<td class='assetNumber'>" . $row['assetNumber'] . "</td>";
        $output .= "<td class='domain'>" . $row['domain'] . "</td>";
        $output .= "<td class='location'>" . $row['locationName'] . "</td>";
        $output .= "<td class='type'>" . $row['type'] . "</td>";
    }
    $output .= "</tbody>";
    $output .= "</table>";
    $output .= "</div>";
    // If there is no rows in the table that is being called then they will display 0 Results... See below.
} else {
    $output .= "0 results";
}

echo $output;

$conn->close();
?>

这有效：

<div class="container-fluid">
    <div class="container">
        <div class="row">
            <main class="col-12" style="margin-top: 80px;">
                <button class="btn btn-primary" onclick="assetSubmit()" style="width: 100%;">Add An Asset</button>
                <?php include 'scripts/getAsset.php'; ?>
            </main>
        </div>
    </div>
</div>
<script>
    populatetable('tableholder');
    window.onload = function () {
        var options = {
            valueNames: ['model', 'serialNumber', 'assetNumber', 'domain', 'location', 'type']
        };
        var userList = new List('users', options);
    };
</script>

这会输出 table 并且所有 list.js 函数都按预期正常工作。

这行不通：

<div class="container-fluid">
    <div class="container">
        <div class="row">
            <main class="col-12" style="margin-top: 80px;">
                <button class="btn btn-primary" onclick="assetSubmit()" style="width: 100%;">Add An Asset</button>
                <!-- Pulling in the results of the assets (most recent assets)  -->
                <div id="tableholder"></div>

                <!-- end -->
            </main>
        </div>
    </div>
</div>

<!-- PHP include for the footer -->
<?php include 'assets/layout/footer.php'; ?>

<!-- end -->

<script>
  populatetable('tableholder');
  window.onload = function (){
    var options = {
      valueNames: [ 'model', 'serialNumber', 'assetNumber', 'domain', 'location', 'type']
    };

    var userList = new List('users', options);

  };
function populatetable(name){

  $.ajax({
    url: "scripts/getAssets.php",
    success: function(data){
      document.getElementById(name).innerHTML = data;
    }
  })
}
</script>

我可以假设：

从我用来测试代码的各种 console.log 行和 php 回声来看，问题似乎是 javascript 命令启动 list.js table 无法找到由 document.getElementById(name).innerHTML = data; 在 populatetable() 函数中创建的 "user" table。我知道这一点是因为下面显示空白：

console.log(document.getElementById(tableholder).innerHTML);

我做错了什么，或者无法提取动态创建元素的 innerHTML 数据？

Answer 1

问题是当您调用 List() 时，ajax 调用尚未完成，因为它是异步的。

试试这个：

var options = {
    valueNames: ['model', 'serialNumber', 'assetNumber', 'domain', 'location', 'type']
};
var userList;

$(document).ready(function() {
    populatetable('#tableholder');
});

function populatetable(id) {
    $.ajax({
        url: "scripts/getAssets.php",
        success: function(data) {
            $(id).html(data);
            userList = new List('users', options);
        }
    });
}

在这里，我在任何有用的地方都使用 jQuery，只有在实际插入数据后才调用 List()。

另请注意，就像我在评论中提到的那样，您需要将 <tbody> 行移到循环之外。

如何拉取由 javascript 函数创建的元素的 innerHTML

How pull innerHTML of element created by javascript function

html

javascript

php

innerhtml

list.js

问题：

目前代码：

PHP 文件调用：

这有效：

这行不通：

我可以假设：