How to prevent other elements not to change position when some specific element prepend?

Question

I have a problem that when I prepend div by pressing input button it(button) also goes down with div which I added very first time.

Here is the code:

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

Can any one please help me that how to avoid other contents not to change their position when some specific element is prepend?

Use above JQUERY code with prepend to check the exact location of div. I want new div to be added at the top of the body — Zain Farooq, Aug 28 '15 at 12:38

score 0 · Answer 1 · answered Aug 28 '15 at 12:08

0

Prepend inserts new element Before the others, and Append inserts element After, so you need to use Append instead.

https://jsfiddle.net/9k1nf6za/

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

answered Aug 28 '15 at 12:08

Dariusz Sikorski

4,309
5
27
44

But I need new DIV at the top of the page when it is added – Zain Farooq Aug 28 '15 at 12:11
Everything is possible to be done, but please say how do you want to insert a new element, before the other elements without moving them, to make space for it? – Dariusz Sikorski Aug 28 '15 at 12:13

score 0 · Answer 2 · answered Aug 28 '15 at 12:10

Please try the bellow code.

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

Use this to check exact position of div. I want new div to be added at the top — Zain Farooq, Aug 28 '15 at 12:32

score 0 · Answer 3 · edited May 23 '17 at 12:06

0

Use .append() as it inserts elements after other elements. Or you can try .prepend() with animation. Prepend with animation

edited May 23 '17 at 12:06

Community

1
1

answered Aug 28 '15 at 12:16

Animesh Nandi

448
6
15

– Zain Farooq Aug 28 '15 at 12:33
Use this jquery code to check exact position of div. I want new div to be added at the top of the body – Zain Farooq Aug 28 '15 at 12:33

score 0 · Answer 4 · answered Aug 28 '15 at 12:47

Please try bellow code where I fixed position of the div and also set z-index to content div so it will display above the all elements

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

How to prevent other elements not to change position when some specific element prepend?

4 Answers4