Dynamic script

Definition: Page loading does not exist, but at some point in the future by modifying the DOM dynamically added scripts.
There are two ways to create dynamic scripts:

• Insert external files
• Insert JavaScript code directly

Insert external files

var script = document.createElement("script");
script.type = "text/javascipt";
script.src = "client.js";
document.body.appendChild(script);

The whole process can be encapsulated with functions:

function loadScript(url){
    var script = document.createElement("script");
    script.type = "text/javascipt";
    script.src = url;
    document.body.appendChild(script);
}
//Then you can call this function to clip the external JavaScript file.
loadScript("client.js");

Insert JavaScript code directly

Specify JavaScript code in an in-line manner.

script type="application/javascript">
    function sayHi() {
        alert("hi");
    }
</script>

Creating JavaScript code in the following way is logically valid, but can cause errors in IE (Firefox, Safari, chrome and Opera will work properly). IE regards < script > as a special element and does not allow DOM to access its child nodes.

var script = document.createElement("script");
script.type = "text/javascipt";
script.appendChild(document.createTextNode("function sayHi(){alert('hi');}"));
document.body.appendChild(script);

Solutions to Errors in IE:
Use the text attribute of the < script > element to specify JavaScript code.

var script = document.createElement("script");
script.type = "text/javascipt";
script.text = "function sayHi(){alert('hi');}";
document.body.appendChild(script);

Code sandwiched in this way is executed in global scope and is available immediately after the script is executed.
After encapsulation,

function loadScriptString(code){
    var script = document.createElement("script");
    script.type = "text/javascipt";
    try{
        script.appendChild(document.createTextNode(code));
    }catch(ex){
        script.text = "function sayHi(){alert('hi');}";
    }
    document.body.appendChild(script);
}

Dynamic style

Definition: A style that does not exist when a page is just loaded.
Dynamic style is added to the page dynamically after the page is loaded.

Insert External Styles

The < link > element must be added to the < head > element instead of the < body > element to ensure that the behavior in all browsers remains constant.

var link = document.createElement("link");
link.rel = "stylesheet";
link.type = "styles.css";
var head = document.getElementsByTagName("head")[0];
head.appendChild(link);

Encapsulation function:

function loadStyles(url){
    var link = document.createElement("link");
    link.rel = "stylesheet";
    link.type = url;
    var head = document.getElementsByTagName("head")[0];
    head.appendChild(link);
}

The process of loading external style files is asynchronous, that is, there is no fixed order between loading styles and executing JavaScript code.

Insert JavaScript code directly

var style = document.createElement("link");
style.rel = "stylesheet";
style.appendChild(document.createTextNode("body{background-color:red}"));
var head = document.getElementsByTagName("head")[0];
head.appendChild(style);

The above code is similar to the error in <script> and will report errors in IE.
The solution to this problem in IE is to access the stylesheet attribute of the element, which has a cssText attribute and can accept CSS code.

var style = document.createElement("link");
style.rel = "stylesheet";
try{
    style.appendChild(document.createTextNode("body{background-color:red}"));
}catch (ex){
    style.stylesheet.cssText = "body{background-color:red}";
}
var head = document.getElementsByTagName("head")[0];
head.appendChild(style);

After encapsulation,

function loadStyleString(css){
    var style = document.createElement("link");
    style.rel = "stylesheet";
    try{
        style.appendChild(document.createTextNode(css));
    }catch (ex){
        style.stylesheet.cssText = css;
    }
    var head = document.getElementsByTagName("head")[0];
    head.appendChild(style);
}

Operation form

HTML DOM adds some attributes and methods for <table>, <tbodt> and <tr> elements to facilitate the construction of tables.
The attributes added for <table> are as follows:

attribute	describe
caption	Keep a pointer to <caption> (if any).
tBodies	HTMLCollection is an < tbody > element
tHead	Keep a pointer to <thead> (if any).
tFoot	Keep a pointer to <tfoot> (if any).
rows	An HTML Collection for all rows in a table.

The methods for adding <table> are as follows:

Method	describe
createCaption()	Create the < caption > element, place it in the table, and return the reference.
createTHead()	Create the < tHead > element, place it in the table, and return the reference.
createTFoot()	Create the < tFootd > element, place it in the table, and return the reference.
inserstRow(pos)	Insert a row to the specified location in the rows collection.
deleteCaption()	Delete the < caption > element.
deleteTHead()	Delete the < tHead > element.
deleteTFoot()	Delete the < tFootd > element.
deleteRow(pos)	Delete rows at specified locations.

The attributes and methods added for <tbody> are as follows:

Attribute/Method	describe
rows	The HTML Collection of rows in the < tbody > element is saved.
inserstRow(pos)	Insert a row at the specified location in the rows collection and return a reference to the newly inserted row.
deleteRow(pos)	Delete rows at specified locations.

The attributes and methods added for <tr> are as follows:

Attribute/Method	describe
cells	HTML Collections of cells in <tr> elements are preserved.
inserstCell(pos)	Insert a cell into the cell set at a specified location and return a reference to the newly inserted cell.
deleteCell(pos)	Delete the cell at the specified location.

<table border="1" width="100%">
    <tbody>
    <tr>
        <td>Cell 1,1</td>
        <td>Cell 2,1</td>
    </tr>
    <tr>
        <td>Cell 1,2</td>
        <td>Cell 2,2</td>
    </tr>
    </tbody>
</table>

Create a table above with the DOM method:

//Establish table
var table = document.createElement("table");
table.border = 1;
table.width = '100%';

//Establish tbody
var tbody = document.createElement("tbody");
table.appendChild(tbody);

//Create the first line
tbody.insertRow(0);
tbody.rows[0].insertCell(0);
tbody.rows[0].cells[0].appendChild(document.createTextNode("Cell 1,1"));
tbody.rows[0].insertCell(1);
tbody.rows[0].cells[1].appendChild(document.createTextNode("Cell 2,1"));

//Create the second line
tbody.insertRow(1);
tbody.rows[1].insertCell(0);
tbody.rows[1].cells[0].appendChild(document.createTextNode("Cell 1,2"));
tbody.rows[1].insertCell(1);
tbody.rows[1].cells[1].appendChild(document.createTextNode("Cell 2,2"));

//Adding tables to document topics
document.body.appendChild(table);

Using NodeList

Three "dynamic" collections: NodeList, NamedNodeMap, HTML Collection.
Document structures are updated whenever they change. Therefore, they always keep the latest and most accurate information.

The following code causes an infinite loop:

var divs = document.getElementsByTagName("div"),
    i,
    div;
for(i=0;i<divs.length;i++){
    div = document.createElement("div");
    document.body.appendChild(div);
}

Therefore, if you want to iterate over a NodeList, you'd better initialize the second variable with the length attribute, and then compare the iterator with that variable:

var divs = document.getElementsByTagName("div"),
    i,
    len,
    div;
for(i=0,len=divs.length;i<len;i++){
    div = document.createElement("div");
    document.body.appendChild(div);
}