Question

我有一个问题，当我通过按下输入按钮来预设div时，它（按钮）也会下降，我第一次添加了div。

以下是代码：

$(document).ready(function() {
  var count = 0;
  $("#addBut").click(function() {


    $('body').prepend('<div class="content"  id="first' + count + '"><h3>Heading tag</h3><p>Paragraph tag</p></div>');
    //It is the jquery code div which I prepends
    count++;

  });

  $("#TextBut")
    .click(function() {
      var value = $(inpText).val();
      $("#para").text(value);
    })
});

#addBut {
  //style of button which goes down
  display: block;
  padding: 3px 10px;
  cursor: pointer;
  margin: auto;
}
.content {
  //style of div which is to be prepend
  position: relative;
  background-color: white;
  width: 500px;
  height: 350px;
  padding: 25px;
  border: 5px solid black;
  display: block;
  margin-left: auto;
  margin-right: auto;
  top: 200px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <input type="text" id="inpText">
  <textarea rows="12" cols="50">//it is text area which also goes down TextArea Location
  </textarea>
  <input type="button" id="addBut" value="Add">// HTML tag of Button which goes down
  <input type="button" id="TextBut">
</div>

任何人都可以帮助我，在某些特定元素出现时，如何避免其他内容不改变其位置？

Answer 1

Prepend插入新元素在其他元素之前，并且Append插入元素After，所以你需要使用Append代替。

https://jsfiddle.net/9k1nf6za/

$('body').append('<div class="content"  id="first'+count+'"><h3>Heading tag</h3><p>Paragraph tag</p></div>');

Answer 2

请尝试以下代码。

<!doctype html>
<html>
<head>

<title>prepend demo</title>
<style>
#addBut{     //style of button which goes down
display: block; padding: 3px 10px; cursor: pointer; margin: auto;
}

.content{       //style of div which is to be prepend
position:relative;
background-color: white;
width: 500px;
height:350px;
padding: 25px;
border: 5px solid black;
 display:block;
margin-left:auto; 
margin-right:auto;
top:200px; 
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
<div>
<input type="text" id="inpText"> 
<textarea rows="12" cols="50">   //it is text area which also goes down
TextArea Location    
</textarea>
<input type="button" id="addBut" value="Add"> // HTML tag of Button which goes down
<input type="button" id="TextBut">
</div>
<script>
$(document).ready(function(){
var count=0;
$("#addBut").click(function(){


$('body').append('<div class="content"  id="first'+count+'"><h3>Heading tag</h3><p>Paragraph tag</p></div>'); 
//It is the jquery code div which I prepends
count++;

});

$( "#TextBut" )
.click(function() {
var value = $( inpText ).val();
$( "#para" ).text( value );
})
});
</script>

</body>
</html>

Answer 3

使用.append()，因为它会在其他元素之后插入元素。或者您可以使用动画尝试.prepend()。 Prepend with animation

Answer 4

请尝试以下代码修改div的位置，并将z-index设置为内容div，以便显示在所有元素上方

<!doctype html>
<html>
<head>

<title>prepend demo</title>
<style>
#addBut{     //style of button which goes down
display: block; padding: 3px 10px; cursor: pointer; margin: auto;
}

.content{       //style of div which is to be prepend
position:relative;
background-color: white;
width: 500px;
height:350px;
padding: 25px;
border: 5px solid black;
 display:block;
margin-left:auto; 
margin-right:auto;
z-index:99999;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
<div style="position:fixed; top:2%; right:2%;">
<input type="text" id="inpText"> 
<textarea rows="12" cols="50">   //it is text area which also goes down
TextArea Location    
</textarea>
<input type="button" id="addBut" value="Add"> // HTML tag of Button which goes down
<input type="button" id="TextBut">
</div>
<script>
$(document).ready(function(){
var count=0;
$("#addBut").click(function(){


$('body').prepend('<div class="content"  id="first'+count+'"><h3>Heading tag</h3><p>Paragraph tag</p></div>'); 
//It is the jquery code div which I prepends
count++;

});

$( "#TextBut" )
.click(function() {
var value = $( inpText ).val();
$( "#para" ).text( value );
})
});
</script>

</body>
</html>

如何防止其他元素在某些特定元素前置时不改变位置？

4 个答案: