JavaScript dynamically creates div attributes and styles sample code_javascript skills

1. Create a div element:

Javascript code

Copy code The code is as follows:

functioncreateElement(){
varcreateDiv=document.createElement("div");
createDiv.innerHTML="Testcreateadivelement! ";
document.body.appendChild(createDiv);
}



functioncreateElement(){ < !-- no "document" if not body-->
}




2. Create div attributes:

Javascript code


Copy code

The code is as follows: functioncreateElement(){

varcreateDiv=document.createElement("div");

createDiv.title="thisisanewdiv.";
createDiv.id="newDivId";
createDiv.class="newDivClass";
createDiv.innerHTML="Testcreateadivelement!";
document.body.appendChild(createDiv);
}



functioncreateElement(){
varcreateDiv=document.createElement("div");
createDiv.title="thisisanewdiv.";
createDiv .id="newDivId";
createDiv.class="newDivClass";
createDiv.innerHTML="Testcreateadivelement!";
document.body.appendChild(createDiv);

createDiv.className = "name file_col";
}




3. Create div Style:

Javascript code


Copy code

The code is as follows:

functioncreateElement(){

varcreateDiv=document.createElement("div");
createDiv.style.background="pink";
createDiv.style.border="1pxsolidred";
createDiv.style.width="50px";
createDiv.style.height="50px";
createDiv.innerHTML="Testcreateadivelement!" ;
document.body.appendChild(createDiv);
}