Simple operation complete example of JS document document

Time:2020-7-10

This paper describes the simple operation of JS document. For your reference, the details are as follows:

<html>
    <head>
        < title > JS document structure operation
        <meta charset="UTF-8"/>
        <script type="text/javascript">
            function testFile(){
//Get element
                var showdiv=document.getElementById("showdiv");
//Add attribute, append element
                showdiv.innerHTML=showdiv . innerHTML + "< div > < input type: 'file' value = '" / > < input type:' button 'value ='delete' onclick ='deldiv (this) '/ > < / div > ";
//Use innerHTML or innerText to display data, and HTML to display data
            }
            function delDiv(btn){
//Get element
                var showdiv=document.getElementById("showdiv");
//Get the parent class of the element to be deleted, because it is in a div, we want to delete the contents of the entire Div
                var cid=btn.parentNode;
//Remove subclass objects with parent objects
                showdiv.removeChild(cid);
            }
//The above is the addition based on the box model, and then re assignment. Therefore, when the user performs the basic operation of file, the operation cannot be saved due to the re assignment
            function testFile2(){
//Get element
                var showdiv=document.getElementById("showdiv2");
//Create the input object in the parent object
                var inp=document.createElement("input");
                inp.type="file";
//Create a button object in the parent object
                var btn= document.createElement ("input"); // use document object to create HTML object in JS
                btn.type= "Button"; // sets several attribute values in the object
                btn.value= "Delete"; and;
                btn.onclick=function del2(){
                    showdiv.removeChild (INP); // use the parent class to remove its child class objects
                    showdiv.removeChild(btn);
                    showdiv.removeChild(br);
                }
//Create a br (newline character) object in the parent object
                var br=document.createElement("br");
//Add attribute objects to the parent Div
                showdiv.appendChild (INP); // use the parent class object to add the function. When calling, it operates on an object
                showdiv.appendChild(btn);
                showdiv.appendChild(br);
            }
            //The above method is to add objects on the basis of the above method, rather than reload as above
        </script>
    </head>
    <body>
        <h3>JS document structure operation</h3>
        <hr />
        < input type = button "name = value = box operation document" onclick = "testfile()" / >
        <hr />
        <div>
        </div>
        <hr />
        < input type = "button" name = value = JS create sub div method operation document "onclick =" testfile2() "/ >
        <hr />
        <div>
        </div>
    </body>
</html>

Operation effect:

Document operation: mainly for users to upload documents;

Basic contents:

Add node, delete node

Methods: refresh text operation

Using innerHTML: div.innerHTML=div . innerHTML + add element “content”

div.innnerHTML =Empty all directly

Use the parent node. Removechild (child node object) to delete the specified element

Method 2: additive text operation

Get object:

var obj = document.createElement (tag name);

Obj. Tag attribute =…… assign values to attributes. All attributes and assigned values can be functions and other legal contents

Interested friends can useOnline HTML / CSS / JavaScript code running tool: http://tools.jb51.net/code/HtmlJsRun Test the above code running effect.

More about JavaScript related content can see our special topic: “JavaScript operation DOM skills summary”, “JavaScript page element operation skills summary”, “JavaScript event related operations and skills”, “JavaScript search algorithm skills summary”, “JavaScript data structure and algorithm skills summary”, “JavaScript traversal algorithm and skills summary” and “javasc” Ript errors and debugging skills summary

I hope this article will help you with JavaScript programming.

Recommended Today

Build HTTP service with C + + Mongoose

Mongoose source code address:https://github.com/cesanta/mo… Mongoose user manual:https://www.cesanta.com/devel… Mngoose set up HTTP service #include <string> #include “mongoose.h” using namespace std; static const char *s_http_port = “8000”; static void ev_handler(mg_connection *nc, int ev, void *ev_data) { struct http_message *hm = (struct http_message *) ev_data; if (ev == MG_EV_HTTP_REQUEST) { std::string uri; if (hm->uri.p && hm->uri.p[0] == ‘/’) […]