jqueryとdivタグを使って既存のdivにテキストを追加する方法テキストに基づいて自動的に高さを増やしたい

Question

私は次のコードを試してみます。しかし、これは動作していません。あなたが私を助けてくれたらと思います。 divタグは、テキストサイズに基づいて自動的に高さを増やしたいと考えています。もし誰かがdivタグにテキストを追加する答えを知っている？ここでは、scriptタグ内でjQueryを使用しました。

$(function() { 
 
    $('#new').on('click', function() { 
 
    $('<p>Text</p>').appendTo('#Content'); 
 
    }); 
 
});

#Content { 
 
    height: 770px; 
 
    width: 70%; 
 
    background-color: white; 
 
    border: 7px solid gray; 
 
}

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

 
<input type="button" id="new" value="Add Text">Addvalues</button> 
 
<div id="Content"></div>

Answer 1

<script type="text/javascript"> 
$(function() { 
    $('#new').on('click', function() { 
    $('<p>Text</p>').appendTo('#Content'); 
    }); 
}); 
</script> 
<style type="text/css"> 
#Content { 
    width: 70%; 
    min-height: 70px; 
    background-color: white; 
    border: 7px solid gray; 
} 
</style> 


<input type="button" id="new" value="Add Text">Addvalues</button> 
<div id="Content"></div> 
<button id="getData">Edit</button><br><br> 
<textarea id="edit"></textarea><button id="done">Save</button> 

<script type="text/javascript"> 

$("#getData").click(function(){ 
var data = $('#Content').text(); 
$("#edit").val(data); 
}); 
$("#done").click(function(){ 
$("#Content").empty(); 
var EditData = $('#edit').val(); 
$("#Content").append('<p>'+EditData+'</p>'); 
}); 
</script> 

Answer 2

あなたは#Content要素に固定heightを設定するためです。 heightを削除するか、代わりにmin-heightを使用してください。

これはデモのためかもしれませんが、最初の例ではjQueryスクリプトファイルをドキュメントに挿入していませんでした。以前はhead要素にjsファイルを挿入する必要があります。 '自動' ともDIVに '分の高さ' を設定するdiv要素の

$(function() { 
 
    $('#new').on('click', function() { 
 
    $('<p>Text</p>').appendTo('#Content'); 
 
    }); 
 
});

#Content { 
 
    width: 70%; 
 
    min-height: 100px; 
 
    background-color: white; 
 
    border: 7px solid gray; 
 
}

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

 
<input type="button" id="new" value="Add Text">Addvalues</button> 
 
<div id="Content"></div>

Answer 3

設定高さ。

#Content { 
height: auto; 
min-height: 200px; 
width: 70%; 
background-color: white; 
border: 7px solid gray; 
}