Differences between contents () and children () in jQuery

1. Basic Concepts

First of all, there is a difference between the two methods.

The Ontents () method returns all the immediate child elements, including the text and annotation nodes of the selected element.

The text node is the actual text that is displayed by the element.

The method is similar to the children () method, but it returns the text and annotation nodes. If in the same domain, the contents () method can also access the HTML of the IFRAME

Children ()

The. Children (selector) method returns all the child elements of each element in the matching element collection (only the Son generation). Parameters are optional, and adding parameters means filtering through the selector to filter the elements.

So, children is a subset of contents.

2, text node

Each node has properties that contain some information about the node. These properties are:

NodeName (node name)
NodeValue (node value)
NodeType (node type)
Valid node types include the following:

1-element (Element)
2-attribute (properties)
3-text (text)
4-cdata
5-entity REFERENCE
6-entity
7-PI (processing instruction)
8-comment (note)
9-document (document)
10-document TYPE
11-document FRAGMENT
12-notation

For example:

<script>
$ (Functions ()
{
$ (' #cc '). Contents (). filter (function ()
{
Return this.nodetype==3;//text node
}). Wrap (' <strong style= ' color:red; > ');
});
</script>
<div id= "CC" >
<br/>
<br/>
Some
<br/>
</div>

The results are:

The result cannot be made out of children.

3, Summary

Same point: You can get a subset of the elements.
Different points: Contents gets more of the text nodes and elements within the frame.