ドキュメント

Manipulation/wrapInner

From jQuery JavaScript Library

Jump to: navigation, search

« Back to Manipulation

wrapInner( html )

Wrap the inner child contents of each matched element (including text nodes) with an HTML structure.
This wrapping process is most useful for injecting additional structure into a document, without ruining the original semantic qualities of a document. This works by going through the first element provided (which is generated, on the fly, from the provided HTML) and finds the deepest ancestor element within its structure -- it is that element that will enwrap everything else.
Arguments:
htmlString
A string of HTML that will be created on the fly and wrapped around the target.
Examples:

Selects all paragraphs and wraps a bold tag around each of its contents.

$("p").wrapInner("<b></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").wrapInner("<b></b>");
  });
  </script>
  <style>p { background:#bbf; }</style>
</head>
<body>
  <p>Hello</p>
  <p>cruel</p>
  <p>World</p>
</body>
</html>

Wraps a newly created tree of objects around the inside of the body.

$("body").wrapInner("<div><div><p><em><b></b></em></p></div></div>");

<!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(){
    $("body").wrapInner("<div><div><p><em><b></b></em></p></div></div>");
  });
  </script>
  <style>
  div { border:2px green solid; margin:2px; padding:2px; }
  p { background:yellow; margin:2px; padding:2px; }
  </style>
</head>
<body>
  Plain old text, or is it?
</body>
</html>

NameType

wrapInner( elem )

Wrap the inner child contents of each matched element (including text nodes) with a DOM element.
Arguments:
elemElement
A DOM element that will be wrapped around the target.
Examples:

Selects all paragraphs and wraps a bold tag around each of its contents.

$("p").wrapInner(document.createElement("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").wrapInner(document.createElement("b"));
  });
  </script>
  <style>p { background:#9f9; }</style>
</head>
<body>
  <p>Hello</p>
  <p>cruel</p>
  <p>World</p>
</body>
</html>

Selects all paragraphs and wraps a jQuery object around each of its contents.

$("p").wrapInner($("<span class='red'></span>"));

<!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").wrapInner($("<span class='red'></span>"));
  });
  </script>
  <style>
  p { background:#9f9; }
  .red { color:red; }
  </style>
</head>
<body>
  <p>Hello</p>
  <p>cruel</p>
  <p>World</p>
</body>
</html>

NameType