Home > Web Front-end > JS Tutorial > Summary of basic operations of javascript dom_javascript skills

Summary of basic operations of javascript dom_javascript skills

WBOY
Release: 2016-05-16 18:29:44
Original
858 people have browsed it

I may encounter it often, so I summarize it as follows:
1. Creation of dom elements
2. Insertion of dom elements
3. Replacement of dom elements
4. Deletion of dom elements

First of all, there are some simple dom elements on the page


 
aaaaaaaa

bbbbbbbb

 
cccccccccc


Next we create a div Element, js code:
var div_d = document.createElement('div');
div_d.innerHTML = "dddddddd";
div_d.id = "d";
//innerText is not used here In order to avoid some problems caused by browser compatibility;
Then insert the created div with ID d in front of the div with ID B in the DOM element
var div_wrap = document.getElementById('wrap');
var div_b = document.getElementById('b');
div_wrap.insertBefore(div_d,div_b);
If you insert it directly behind the child element with the id of wrap, you can do this:
div_wrap.insertBefore( div_d,null);

If div_b is replaced, the following is as follows:
div_wrap.replaceChild(div_d,div_b);
Finally we delete the specified div
div_b with an element id of b .parentNode.removeChild(div_b);
or
document.body.removeChild(div_b);
There may be many derived methods and applications in the future. I will not continue to write them down for the time being

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template