What does innerHTML do in javascript?
Can anyone tell me what innerHTML does in javascript and give me example how开发者_如何学JAVA I can use it?
The innerHTML property is used to get or set the HTML content of an element node.
Example: http://jsfiddle.net/mQMVc/
// get the element with the "someElement" id, and give it new content
document.getElementById('someElement').innerHTML = "<p>new content</p>";
// retrieve the content from an element
var content = document.getElementById('someElement').innerHTML;
alert( content );
The innerHTML property is part of the Document Object Model (DOM) that allows Javascript code to manipulate a website being displayed. Specifically, it allows reading and replacing everything within a given DOM element (HTML tag).
However, DOM manipulations using innerHTML are slower and more failure-prone than manipulations based on individual DOM objects.
innerHTML is a property of every element. It tells you what is between the starting and ending tags of the element, and it also let you sets the content of the element.
property describes an aspect of an object. It is something an object has as opposed to something an object does.
<p id="myParagraph">
This is my paragraph.
</p>
You can select the paragraph and then change the value of it's innerHTML with the following command:
document.getElementById("myParagraph").innerHTML = "This is my paragraph";
For understanding innerHTML property you first need to go through the basics of the javascript object and HTML DOM(Document object model). I will try to explain:
- JavaScript objects consist of properties and methods.
- for rendering HTML document web browser creates a DOM, in DOM every HTML element is treated as a JavaScript Object which has a set of properties and methods associated with it.
Now coming to your Question:
HTML code:
<p id= "myPara"> We love to Code.</p>
JavaScript code:
alert(document.getElementById("myPara").innerHTML);
here, document.getElementById("myPara") will return our html element as a javascript object which has pre-defined property innerHTML. innerHTML property contains the content of HTML tag.
Hope this will help.
You can run following HTML code in your browser to understand it:
<html>
<body>
<p id= "myPara"> We love to Code.</p>
<script>
alert(document.getElementById("myPara").innerHTML);
</script>
</body>
</html>
Each HTML element has an innerHTML property that defines both the HTML code and the text that occurs between that element's opening and closing tag. By changing an element's innerHTML after some user interaction, you can make much more interactive pages.
However, using innerHTML requires some preparation if you want to be able to use it easily and reliably. First, you must give the element you wish to change an id. With that id in place you will be able to use the getElementById function, which works on all browsers.
You can collect or set the content of a selected tag.
As a Pseudo idea, its similar to having many boxes within a room and imply the idea 'everything within that box'
The innerHTML fetches content depending on the id/name and replaces them.
<!DOCTYPE html>
<html>
<head>
<title>Learn JavaScript</title>
</head>
<body>
<button type = "button"
onclick="document.getElementById('demo').innerHTML = Date()"> <!--fetches the content with id demo and changes the innerHTML content to Date()-->
Click for date
</button>
<h3 id = 'demo'>Before Button is clicked this content will be Displayed the inner content of h3 tag with id demo and once you click the button this will be replaced by the Date() ,which prints the current date and time </h3>
</body>
</html>When you click the button,the content in h3 will be replaced by innerHTML assignent i.e Date() .
innerHTML explanation with example:
The innerHTML manipulates the HTML content of an element(get or set). In the example below if you click on the Change Content link it's value will be updated by using innerHTML property of anchor link Change Content
Example:
<a id="example" onclick='testFunction()'>Change Content</a>
<script>
function testFunction(){
// change the content using innerHTML
document.getElementById("example").innerHTML = "This is dummy content";
// get the content using innerHTML
alert(document.getElementById("example").innerHTML)
}
</script>
Each HTML element has an innerHTML property that defines both the HTML code and the text that occurs between that element's opening and closing tag. By changing an element's innerHTML after some user interaction, you can make much more interactive pages.
However, using innerHTML requires some preparation if you want to be able to use it easily and reliably. First, you must give the element you wish to change an id. With that id in place you will be able to use the getElementById function, which works on all browsers.
After you have that set up you can now manipulate the text of an element. To start off, let's try changing the text inside a bold tag.
JavaScript Code:
<script type="text/javascript">
function changeText(){
document.getElementById('boldStuff').innerHTML = 'Fred Flinstone';
}
</script>
<p>Welcome to the site <b id='boldStuff'>dude</b> </p>
<input type='button' onclick='changeText()' value='Change Text'/>
This answer is from here
It represents the textual contents of a given HTML tag. Can also contain tags of its own.
It does literally what it says - it returns the inner content of the specified HTML element. The most minimal self contained demonstration is shown below:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<script>
alert(document.getElementById("myElement").innerHTML);
</script>
<div id="myElement">
Hello, world!
</div>
</body>
</html>
Running the javascript code within the tag will popup a notification saying
"Hello, world!"
加载中,请稍侯......
精彩评论