How to add span dynamically in JavaScript?

Given an HTML document and the task is to change the text of the span element. There are two properties used to change the content.

HTML DOM textContent Property: This property set/return the text content of the defined node, and all its descendants. By setting the textContent property, the child nodes the removed and replaced by a single text node having the specified string. 

Syntax:

• Return the text content of a node:

node.textContent

• Set the text content of a node:

node.textContent = text

HTML DOM innerText Property: This property set/return the text content of the defined node, and all its descendants. By setting the innerText property, any child nodes are removed and replaced by a single text node having the specified string. 

The Span object represents an HTML element.

Access a Span Object

You can access a element by using getElementById():

Create a Span Object

You can create a element by using the document.createElement() method:

Standard Properties and Events

The Span object supports the standard properties and events.

Related Pages

HTML tutorial: HTML Blocks

HTML reference: HTML tag

click on Create Span link and span will be generate dynamically, If you want more maipulations or doing else then tell me i'll get back to you.. :)

Add your solution here

 B   I   U   S  small BIG code var  <   >   &  link [^] encode untab case indent outdent

Preview 0

Existing Members

...or Join us

Download, Vote, Comment, Publish.

This email is in use. Do you need your password?

When answering a question please:

1. Read the question carefully.
2. Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
3. If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
4. Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

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.

How to add text to span dynamically in JavaScript?

How to add span element in JavaScript?

How to add text to span programmatically?

How to add span in div using JavaScript?