ドキュメント

Manipulation/after

From jQuery JavaScript Library

Jump to: navigation, search

« Back to Manipulation

after( content )

Insert content after each of the matched elements.

The elements must already be inserted into the document (you can't insert an element after another if it's not in the page).

Arguments:
contentString, Element, jQuery
Content to insert after each target.
Examples:

Inserts some HTML after all paragraphs.

$("p").after("<b>Hello</b>");

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  
  <script>
  $(document).ready(function(){
    $("p").after("<b>Hello</b>");
  });
  </script>
  <style>p { background:yellow; }</style>
</head>
<body>
  <p>I would like to say: </p>
</body>
</html>

Inserts a DOM element after all paragraphs.

$("p").after( document.createTextNode("Hello") );

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  
  <script>
  $(document).ready(function(){
    $("p").after( document.createTextNode("Hello") );
  });
  </script>
  <style>p { background:yellow; }</style>
</head>
<body>
  <p>I would like to say: </p>
</body>
</html>

Inserts a jQuery object (similar to an Array of DOM Elements) after all paragraphs.

$("p").after( $("b") );

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  
  <script>
  $(document).ready(function(){
    $("p").after( $("b") );
  });
  </script>
  <style>p { background:yellow; }</style>
</head>
<body>
  <b>Hello</b>
  <p>I would like to say: </p>
</body>
</html>

NameType