简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > Web Front-end > JS Tutorial > body text

JavaScript dynamically creates div attributes and styles sample code_javascript skills

WBOY
Release： 2016-05-16 17:20:40
Original
1299 people have browsed it
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);
}


Related labels：
Dynamically created
source：php.cn
Previous article：How to make a checkbox select only one item_javascript skills Next article：Introduction to the difference between javascript function declaration and function expression_javascript skills
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
Latest Articles by Author
Latest Issues
Dynamically modify inline CSS styles in Javafx I'm trying to change the background image of a pane when the application is maximized. My ...
From 2024-04-06 20:57:16
0
1
487
Creating this specific design using a grid: a step-by-step guide I'm trying to create a layout similar to this image, I've tried using this grid but can't ...
From 2024-04-06 20:29:08
0
2
492
Problems encountered when using opentbs to generate odt files: values ​​of the same key are displayed in the same row instead of separate columns. I'm using a library called OpenTbs to create odt using PHP, I'm using it because columns a...
From 2024-04-06 20:18:18
0
1
483
CSS only method to dynamically modify image src on click without using JavaScript I need to change the src of an image on mouse click using only css like img:active{}
From 2024-04-06 19:25:49
0
1
505
Unable to get input element from website So I'm trying to get an input element from Twitter, but when I run it it keeps giving me a...
From 2024-04-06 18:59:57
0
1
442
Related Topics
More>
Popular Recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！