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:
- Set the text content of a node:
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.
Your EmailThis email is in use. Do you need your password?
Optional PasswordWhen answering a question please:
- Read the question carefully.
- Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
- 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.
- 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.