JavaScript Tutorial/jQuery/after
Содержание
Add after
<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> a</p><b>b</b>
</body>
</html>
Add after text node
<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>
<b>b</b>
<p>p</p>
</body>
</html>
Add after text node created from document.createTextNode
<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> a</p><b>b</b>
</body>
</html>
Add before and after
<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(
function() {
$("p")
.before(
"<h4>Quotes</h4>"
)
.after(
"<p class="tmpAttribution">\n" +
" - after\n" +
"</p>\n"
);
}
);
</script>
<style type="text/css">
p {
margin: 5px;
}
p.tmpAttribution {
text-align: right;
}
</style>
</head>
<body>
<p>
asdf
</p>
</body>
</html>
Inserts a jQuery object (similar to an Array of DOM Elements) 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") );
});
</script>
</head>
<body>
<body>
<b>asdf</b>
<p>asdf: </p>
</body>
</html>
Use after to switch node
<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("p").after( $("b") );
});
</script>
</head>
<body>
<body>
<b>b</b>
<p>p</p>
</body>
</html>