JavaScript dynamic div property and style example code _ javascript skills

It is more practical to dynamically create div attributes and styles in some cases. The following describes how to dynamically create div attributes and styles in Javascript. For more information, see 1. Create a p element:

Javascript code

The Code is as follows:

FunctioncreateElement (){
VarcreateDiv = document. createElement ("p ");
CreateDiv. innerHTML = "Testcreateapelement! ";
Document. body. appendChild (createDiv );
}
Script


FunctioncreateElement (){
VarcreateDiv = document. createElement ("p ");
CreateDiv. innerHTML = "Testcreateapelement! ";
Document. body. appendChild (createDiv );
PFileitem. appendChild (pName );
}
Script

2. Create properties of p:

Javascript code

The Code is as follows:

FunctioncreateElement (){
VarcreateDiv = document. createElement ("p ");
CreateDiv. title = "thisanewp .";
CreateDiv. id = "newDivId ";
CreateDiv. class = "newDivClass ";
CreateDiv. innerHTML = "Testcreateapelement! ";
Document. body. appendChild (createDiv );
}
Script


FunctioncreateElement (){
VarcreateDiv = document. createElement ("p ");
CreateDiv. title = "thisanewp .";
CreateDiv. id = "newDivId ";
CreateDiv. class = "newDivClass ";
CreateDiv. innerHTML = "Testcreateapelement! ";
Document. body. appendChild (createDiv );

CreateDiv. className = "name file_col ";
}
Script

3. Create a p style:

Javascript code

The Code is as follows:

FunctioncreateElement (){
VarcreateDiv = document. createElement ("p ");
CreateDiv. style. background = "pink ";
CreateDiv. style. border = "1 pxsolidred ";
CreateDiv. style. width = "50px ";
CreateDiv. style. height = "50px ";
CreateDiv. innerHTML = "Testcreateapelement! ";
Document. body. appendChild (createDiv );
}
Script