添加jquery append后如何在不使用css溢出的情况下获取div高度

Question

我想在最后添加一些元素后获得 div 高度，而不使用 css 溢出。

HTML 代码：

<div id="wall"></div>

Javacript 代码：

var walldown = setInterval(walldownfn, 10000);

    function walldownfn() {

        $.post("/php/post.php", function(data, status){
          $("#wall").append(data+"<br>");

        });
        var awrap = document.getElementById("wall");
        alert(awrap);
        }

警报输出：

[object HTMLDivElement] or 0 height

ajax 响应数据是 HTML 代码。

例子：

<div class="card" style="width: 20rem;">
  <img class="card-img-top" src="..." alt="Card image cap">
  <div class="card-block">
    <h4 class="card-title">Card title</h4>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

Answer 1

试试这个：

var walldown = setInterval(walldownfn, 10000);

function walldownfn() {
    $.post("/php/post.php", function(data, status){
        $("#wall").append(data+"<br>");
        alert($("#wall").height());
    });
}

Answer 2

通过使用$("#wall").height()，您可以获得每次延时的 div 高度参见下面的代码（控制台而不是警报）

var walldown = setInterval(walldownfn, 1500);

var returned_data = '<div class="card" style="width: 20rem;"><img class="card-img-top" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSQythd0ly14qbZd7YEJ9WreTX4-dBQw7vfGS33ZXbTQRJjE1AHITKZE5g" alt="Card image cap"><div class="card-block"><h4 class="card-title">Card title</h4><p class="card-text">Some quick example text to build on the card title and make up the bulk of the card\'s content.</p><a href="#" class="btn btn-primary">Go somewhere</a></div></div>';
function walldownfn() {

  $.post("https://httpbin.org/post", {text:returned_data},function(data, status){
      $("#wall").append(data.form.text);
      console.log("height : "+$("#wall").height());
  });
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wall"></div>