
Javascript create element(div,li,img,span) dynamically and set attribute for them
Assigning a string of html tags to a javascript variable, in addition to using the escaped double quotes for the value of the attribute, sometimes the string is very long and it seems a bit complicated. If you use javascript to add elements dynamically, there will be no such complicated strings, the code is more readable and easy to understand.
The webpage is composed of html tags(elements) one by one, and you can also dynamically add tags such as div, li, and img one by one in javascript. In fact, no matter what html tag, the methods of javascript create element is similar, and then we start by dynamically adding div tag.
I, Javascript create div element dynamically
<div id="parent"></div>
function createElementDiv(obj) {
var parent = document.getElementById(obj);
// Add div
var div_obj = document.createElement("div");
// Set attribute for div, such as id
div_obj.setAttribute("id", "new_div");
div_obj.innerHTML = "Example One of javascript create element: Add a div element dynamically in javascript" ;
parent.appendChild(div_obj);
}
Call: createElementDiv("parent");
Hint: JavaScript code must be placed behind the div element, otherwise it will cause the code execution error because it cannot be got; because if the javascript code comes first, it will be loaded first and then the div element will be loaded.
II, How to create ul and li dynamically in javascript
<ul id="parent_ul"><li>Old li</li></ul>
function createElementLi(obj) {
var ul_obj = document.getElementById(obj);
//Create li
var li_obj = document.createElement("li");
//Set attribute for li, such as id
li_obj.setAttribute("id", "new_li");
li_obj.innerHTML = "Example Two of javascript create element: Add a li element dynamically in javascript";
ul_obj.appendChild(li_obj);
}
Call: createElementLi("parent_ul");
If you want to create ul element, you can write code as this: var ul_Object = document.createElement("ul");
III, How to create image tag dynamically javascript
<ul id="parent_ul"></ul>
function createElementImg(obj) {
var ul_obj = document.getElementById(obj);
// Add li
var li_obj = document.createElement("li");
// Add img
var img_obj = document.createElement("img");
// Set attribute for img, such as id
img_obj.setAttribute("id", "newImg");
// Set address for img
img_obj.src = "/images/product.jpg";
li_obj.appendChild(img_obj);
ul_obj.appendChild(li_obj);
}
Call: createElementImg("parent_ul");
IV, How to create span element javascript
<div id="parent_div"></div>
<script type="text/javascript" language ="javascript" >
function createElementSpan(obj) {
var div_obj = document.getElementById(obj);
// Add span
var span_obj = document.createElement("span");
// Set attribute for span element, such as id
span_obj.setAttribute("id", "span_New");
// Set text for span element
span_obj.innerHTML = "Example three of javascript create element: Add a New Span element";
div_obj.appendChild(span_obj);
}
</script>
Call: createElementSpan("parent_div");
In addition to the above four elements, there are many elements in Html, and other elements are added in the same way.
-
Related Reading
- Javascript multidimensional array (create, add and r
- Javascript get current url, domain from url, relativ
- Javascript convert hex to decimal, binary to hex, oc
- Remove html element javascript by their parent or cl
- Javascript get all input elements in form and all im
- Mod operator and rounding off numbers in javascript
- Javascript img src path changes, with without id (ge
- Javascript show hide div onclick, onclick radio butt
- Javascript round to 2 decimal and any decimal places
- Javascript get element height and width, with div, u
- Javascript remove element from array,with deleting f
- Javascript get element by id with getElementById() o