如何防止某些特定元素預先添加時其他元素不能更改位置？

我有一個問題，當我通過按輸入按鈕預先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>

任何一個可以請幫我，如何避免其他內容沒有改變自己的立場時，一些特定的元素是預先準備？

來源

2015-08-28 Zain Farooq

你有沒有試過追加以上？ –

Sory，我用prepend。 –

可能是因爲追加不會發生。 –

預先插入新元素在別人之前，並追加插入元素之後，所以你需要使用Append來代替。

https://jsfiddle.net/9k1nf6za/

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

來源

2015-08-28 12:08:46

但是，當我添加新頁面時，我需要在頁面頂部添加新的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; 
 
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>

來源

2015-08-28 12:10:41

但我需要新的DIV在當它被添加 –

–

用此檢查div的確切位置。我想在上面 –

使用.append()作爲它插入的其他元素後的元件。或者你可以嘗試.prepend()動畫。 Prepend with animation

來源

2015-08-28 12:16:10

–

使用此jquery代碼來檢查div的確切位置。我想要新的div被添加在身體的頂部 –

請嘗試波紋管代碼，我固定的股利的位置，還可以設置z索引內容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>

來源

2015-08-28 12:47:13

如何防止某些特定元素預先添加時其他元素不能更改位置？

回答

相關問題