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.