before 和 insertBefore 方法

時間 2020-02-11

標籤 insertbefore 方法简体版

原文原文鏈接

before、insertBefore均可以在元素前面添加元素。稍有不一樣的是要添加的元素在statement中的位置。 javascript

$('.prettyBox').before("<div class='newPrettybox'>Iron man</div>");

$("<div class='newPrettybox'>Iron man</div>").insertBefore('.prettyBox');

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
 
<style type="text/css">
	.prettyBox{
		padding:8px;
		background: grey;
		margin-bottom:8px;
		width:300px;
		height:100px;
	}
	.newPrettybox{
		padding:8px;
		background: red;
		margin-bottom:8px;
		width:200px;
		height:50px;
	}
</style>
 
</head>
<body>
  <h1>jQuery before() and insertBefore() example</h1>
 
  <div class="prettyBox">Ip man</div>
 
  <div class="prettyBox">Ip man 2</div>
 
  <p>
  <button id="before">before()</button>
  <button id="insertBefore">insertBefore()</button>
  <button id="reset">reset</button>
  </p>
 
<script type="text/javascript">
 
    $("#before").click(function () {
 
	  $('.prettyBox').before("<div class='newPrettybox'>Iron man</div>");
 
    });
 
	$("#insertBefore").click(function () {
 
	  $("<div class='newPrettybox'>Iron man</div>").insertBefore('.prettyBox');
 
    });
 
	$("#reset").click(function () {
	  location.reload();
    });
 
</script>
</body>
</html>

相關標籤/搜索