ドキュメント

Manipulation/append

From jQuery JavaScript Library

Jump to: navigation, search

« Back to Manipulation

append( content )

Append content to the inside of every matched element.
This operation is the best way to insert elements inside, at the end, of all matched elements. It is similar to doing an appendChild to all the specified elements, adding them into the document.
Arguments:
contentString, Element, jQuery
Content to append to the target.
Examples:

Appends some HTML to all paragraphs.

$("p").append("<strong>Hello</strong>");

<!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").append("<strong>Hello</strong>");
  });
  </script>
  <style>p { background:yellow; }</style>
</head>
<body>
  <p>I would like to say: </p>
</body>
</html>

Appends an Element to all paragraphs.

$("p").append(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").append(document.createTextNode("Hello"));
  });
  </script>
  <style>p { background:yellow; }</style>
</head>
<body>
  <p>I would like to say: </p>
</body>
</html>

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

$("p").append( $("strong") );

<!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").append( $("strong") );
  });
  </script>
  <style>p { background:yellow; }</style>
</head>
<body>
  <strong>Hello world!!!</strong><p>I would like to say: </p>
</body>
</html>

NameType