Home > Developer > Web Develop
Use JavaScript to wrap text element nodes and javascript nodes
Original article link: Wrapping Text Nodes and Elements with JavaScript original Article Date: Translated by: Tie
When your application depends on a specific JavaScript class library, you will always try to solve the problems of some class libraries rather than the language. For example, when I try to wrap text (which may also contain HTML elements) with a DIV element. Suppose there are the following HTML:
This is some text and <a href="">a link</a>.
<div>This is some text and <a href="">a link</a>.<div>
Var newWrapper = document. createElement ('div '); while (existingParent. firstChild) {// move the DOM element, no new element newWrapper. appendChild (existingParent. firstChild) is created );}
GetElementsByTagName ("tag name") indicates that the query returns all elements of the tag. Therefore, it is a set.
Document. getElementsByTagName ("tag") is used to query all the tag elements in the document.
Alert (document. getElementsByTagName ("div"). length) returns the number of query results. Here the result is 1
The text of this element should be written in document. getElementsByTagName ("div") [0]. innerHTML.
Take the html text of the first div
======================================
Other examples
<Html>
<Head> <title> test </title> <Script type = "text/javascript">
// Search for the span subnode under the first div in the document
Window. onload = function () {// document loading completion event
Var div1 = document. getElementsByTagName ("div") [0]; // The first DIV of the document
Var spans = div1.getElementsByTagName ("span"); // All SPAN tag elements under the DIV
For (var I = 0; I <spans. length; I ++) {// The text of each SPAN label is displayed cyclically.
Alert (spans [I]. innerHTML );
}
}
</Script>
<Body>
<Div> <span> text 1 </span> <span> second text </span> <span> text </span> </div>
</Body>
</Html>
In javascript, nodetype has three nodes: 1 representing the element node, 2 representing the attribute node, and 3 representing the text node.
NodeType is the type used to obtain the object of the current node.
The nodeType attribute returns the node type.
Element 1
Attribute attr 2
Text 3
Comment comments 8
Document 9
For example
Html:
Js: var element = document. getElementById ("h1"); // h1 is a Var type = element. nodeType; // The returned nodeType = 1, type = 1.
And so on
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
