JavaScript Tutorial/jQuery/insertAfter
Содержание
Creating HTML elements on the fly
<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("<p>Hi there!</p>").insertAfter("#followMe");
});
</script>
<style>
div { margin:3px; width:50px; position:absolute;
height:50px; left:10px; top:30px;
background-color:yellow; }
div.red { background-color:red; }
</style>
</head>
<body>
<body>
<p id="followMe">Follow me!</p>
</body>
</html>
Inser query after
<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("p").insertAfter("#foo");
});
</script>
</head>
<body>
<body>
<p>a</p><div id="foo">b</div>
</body>
</html>
insertAfter(content): the reverse of $(A).after(B)
<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("p").insertAfter( $("b") );
});
</script>
</head>
<body>
<body>
<p>asdf: </p>
<b>asdf</b>
</body>
</html>
Insert cloned object
<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("b").clone(true).insertAfter("p");
});
</script>
</head>
<body>
<body>
<b>Hello</b><p>, how are you?</p>
</body>
</html>
Inserts a DOM element after all paragraphs.
<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("p").after( document.createTextNode("Hello") );
});
</script>
</head>
<body>
<body>
<p>asdf</p>
</body>
</html>
Inserts all paragraphs after an element
<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("p").insertAfter( $("b") );
});
</script>
</head>
<body>
<body>
<p>asdf: </p>
<b>asdf</b>
</body>
</html>
Inserts some HTML after all paragraphs.
<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("p").after("<b>Hello</b>");
});
</script>
</head>
<body>
<body>
<p>asdf</p>
</body>
</html>