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

Question

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

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

通过使用$("#wall").height()您可以每次经过div $("#wall").height()看到代码波纹管（用控制台代替警报）

 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> 

Answer 2

尝试这个：

var walldown = setInterval(walldownfn, 10000);

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