JavaScript's DOM insertion, update and delete, for your reference, the specific content is as follows
renew
After getting a DOM node, we can update it.
There are two ways to modify the text of a node:
One is modificationinnerHTMLAttributes, this method is very powerful. It can not only modify the text content of a DOM node, but also directly modify the subtree inside the DOM node through HTML fragments:
// Get <p >...</p>var p = ('p-id');
// Set the text to abc: = 'ABC'; // <p >ABC</p>
// Set HTML: = 'ABC <span style="color:red">RED</span> XYZ';
// The internal structure of <p>...</p> has been modified
useinnerHTMLWhen paying attention to whether HTML is required. If the written string is obtained through the network, be careful to encode characters to avoid XSS attacks.
The second type is modificationinnerTextortextContentProperties, this will automatically HTML encoding of strings, ensuring that no HTML tags can be set:
// Get <p >...</p>var p = ('p-id');
// Set text: = '<script>alert("Hi")</script>';
// HTML is automatically encoded, and a <script> node cannot be set:// <p >&lt;script&gt;alert("Hi")&lt;/script&gt;</p>
The difference between the two is when reading attributes,innerTextdoes not return text of hidden elements, buttextContentReturns all text. Also note that IE<9 does not supporttextContent。
Modifying CSS is also a common operation. DOM nodestyleThe attribute corresponds to all CSS and can be directly retrieved or set. Because CSS allowsfont-sizeSuch a name, but it is not a valid attribute name for JavaScript, so it needs to be rewritten as camel-style name in JavaScriptfontSize：
// Get <p >...</p>var p = ('p-id');
// Set CSS: = '#ff0000';
= '20px';
= '2em';
insert
When we have obtained a DOM node and want to insert a new DOM into this DOM node, what should we do?
If this DOM node is empty, for example,<div></div>，Then, use it directlyinnerHTML = '<span>child</span>'The content of the DOM node can be modified, which is equivalent to "inserting" a new DOM node.
If this DOM node is not empty, then you can't do this, becauseinnerHTMLAll original child nodes will be replaced directly.
There are two ways to insert a new node. One is to useappendChild, add a child node to the last child node of the parent node. For example:
<!-- HTMLstructure --> <p >JavaScript</p> <div > <p >Java</p> <p >Python</p> <p >Scheme</p> </div>
Bundle<p >JavaScript</p>Add to<div >The last item:
var
js = ('js'),
list = ('list');
(js);
Now, the HTML structure becomes like this:
<!-- HTMLstructure --> <div > <p >Java</p> <p >Python</p> <p >Scheme</p> <p >JavaScript</p> </div>
Because the js node we inserted already exists in the current document tree, this node will first be deleted from its original location and then inserted into a new location.
More often than not, we will create a new node from zero and insert it to the specified location:
var
list = ('list'),
haskell = ('p');
= 'haskell';
= 'Haskell';
(haskell);
In this way, we dynamically add a new node:
<!-- HTMLstructure --> <div > <p >Java</p> <p >Python</p> <p >Scheme</p> <p >Haskell</p> </div>
Dynamically creating a node and then adding it to the DOM tree can achieve many functions. For example, the following code dynamically creates a<style>node, then add it to<head>At the end of the node, a new CSS definition is dynamically added to the document:
var d = ('style');
('type', 'text/css');
= 'p { color: red }';
('head')[0].appendChild(d);
You can execute the above code in Chrome's console to observe changes in page style.
insertBefore
What if we want to insert child nodes into the specified location? Available(newElement, referenceElement);，The child node will be inserted intoreferenceElementBefore.
Let’s take the HTML above as an example, suppose we want to insert Haskell before Python:
<!-- HTMLstructure --> <div > <p >Java</p> <p >Python</p> <p >Scheme</p> </div>
You can write this way:
var
list = ('list'),
ref = ('python'),
haskell = ('p');
= 'haskell';
= 'Haskell';
(haskell, ref);
The new HTML structure is as follows:
<!-- HTMLstructure --> <div > <p >Java</p> <p >Haskell</p> <p >Python</p> <p >Scheme</p> </div>
Visible, useinsertBeforeThe point is to get a reference to a "reference child node". Many times, it is necessary to loop through all children of a parent node, which can be iterated.childrenProperty implementation:
var
i, c,
list = ('list');
for (i = 0; i < ; i++) {
c = [i]; // Get the ith child node}
delete
Deleting a DOM node is much easier than inserting it.
To delete a node, first you need to obtain the node itself and its parent node, and then call the parent node's removeChild to delete itself:
// Get the node to be deleted:var self = ('to-be-removed');
// Get the parent node:var parent = ;
// delete:var removed = (self);
removed === self; // true
I noticed that although the deleted node is no longer in the document tree, it is actually still in memory and can be added to another location at any time.
When you traverse a child of a parent node and perform a delete operation, be aware that the children attribute is a read-only attribute and it will be updated in real time when the child node changes.
For example, for the following HTML structure:
<div > <p>First</p> <p>Second</p> </div>
When we use the following code to delete the child node:
var parent = ('parent');
([0]);
([1]); // <-- Browser error
Browser error:[1]Not a valid node. The reason is that<p>First</p>After the node is deleted,The number of nodes has changed from 2 to 1, index[1]It no longer exists.
Therefore, when deleting multiple nodes, be carefulchildrenAttributes are changing all the time.
The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.