JavaScript DHTML/jQuery/insertAfter
Содержание
Creating HTML elements on the fly
<source lang="html4strict">
<html>
<head> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript"> $(document).ready(function(){$("
Hi there!
").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>
Follow me!
</body>
</html>
</source>
Inser query after
<source lang="html4strict">
<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>
a
b
</body>
</html>
</source>
insertAfter(content): the reverse of $(A).after(B)
<source lang="html4strict">
<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>
asdf:
asdf </body>
</html>
</source>
Insert cloned object
<source lang="html4strict">
<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>Hello
, how are you?
</body>
</html>
</source>
Inserts a DOM element after all paragraphs.
<source lang="html4strict">
<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>
asdf
</body>
</html>
</source>
Inserts all paragraphs after an element
<source lang="html4strict">
<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>
asdf:
asdf </body>
</html>
</source>
Inserts some HTML after all paragraphs.
<source lang="html4strict">
<html>
<head> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("p").after("Hello"); }); </script> </head> <body> <body>
asdf
</body>
</html>
</source>