Shulou(Shulou.com)06/02 Report--

This article is about how javascript replaces nodes. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

In JavaScript, you can replace a node with the replaceChild () method, which replaces one child node with another, and the new node can be existing or newly created with the syntax "node.replaceChild (newnode,oldnode)".

The operating environment of this tutorial: windows10 system, javascript1.8.5 version, Dell G3 computer.

How javascript replaces nodes

The JavaScript replaceChild () method can replace one child node with another. The usage is as follows:

NodeObject.replaceChild (new_node, old_node)

Where the parameter new_node is the specified new node and old_node is the replaced node. The replaced node is returned if the replacement is successful, and null is returned if the replacement fails.

Example 1

The above example is based on a rewrite script to create a new secondary title element and replace the first-level title element in the red box.

Var ok = document.getElementById ("ok"); / / get the reference to the button element ok.onclick = function () {/ / register a mouse click event handler function var red = document.getElementById ("red") for the button; / / get the reference to the red box var H2 = document.getElementsByTagName ("H2") [0]; / / get the reference to the first-level title var h3 = documeng.createElement ("h3") / / create a secondary title element and reference red.replaceChild (h3, H2); / / replace the first-level title with a second-level title}

The demo found that after replacing the first-level title with the newly created second-level title, the title text contained in the original first-level title no longer exists. This means that the operation of replacing a node is not to replace the element name, but to replace all the child nodes it contains and all the contents it contains.

By the same token, if the replacement node also contains child nodes, the child nodes will be inserted into the replaced node together. You can use the replaceChild () method to replace another existing node in the document with an existing node.

Examples are as follows:

123CoffeeTeaMilk clicks the button to replace the first item in the list.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.