Question

我尝试按照代码。但这不起作用。希望你帮帮我。 div标签希望根据文本大小自动增加高度。如果有人知道答案如何将文本添加到div标签？这里在脚本标记中使用了jQuery。

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 1

这是因为您将固定height设置为#Content元素。移除height或改为使用min-height。

这可能是因为演示，但在您的第一个示例中，您错过了将jQuery脚本文件插入到您的文档中。您需要在之前将js文件插入head元素。

$(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 2

将div的高度设置为＆＃39; auto ＆＃39;并且还设置了一个最小高度的＆＃39;到了div。

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

Answer 3

<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>

如何使用jquery和div标签向现有div添加文本希望根据文本自动增加高度

3 个答案: