What does innerHTML do in javascript? - javascript

Can anyone tell me what innerHTML does in javascript and give me example how 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!"

Related

How can get the text of <a> tag without id using only javascript

I am attaching a javascript to the following a tag section
<a class="btn-button button" onclick="myAlert()">
</a>
And this is my javascript function
<script>
function myAlert() {
alert('Test..');
}
</script>
How can I get the current text been assigned when the javascript will fire?
As you can see there is not id been set in the a tag.
EDIT
I know that right now there is not value but I was just copy my actually code. At some point there will be a values since it is used from other components including Angular.
I can't tell which proper Angular way to do this as you haven't shared Angular code, but this is how it can be done in vanilla HTML/JS:
In the onclick, set this as an argument to your function, so that you can receive the HTML element that called it.
Then you can use either textContent or innerText (see list of their differences in this MDN page) to get or change the text value.
function myAlert(element) {
alert('Test..' + element.textContent);
//adding something so that we can see it's dynamic
element.textContent += ' bla';
}
<a class="btn-button button" onclick="myAlert(this)">
click me</a>

Insert schema data inside html tag with javascript

I am wondering if there is a way to insert text, schema data in particular, into a html div tag using javascript. I know there are methods for modifying existing values inside a tag such as class, href, title, but can't seem to find a way to add something new.
Basically I have <div id="main"> and I want to modify it to be <div id="main" itemtype="http://schema.org/SomeCategory" itemscope> and to be able to remove it later.
The context for such a need is using fetch / js to replace parts of webpages rather than reloading the entire page. The product pages use the schema notation, whereas general info pages do not, though all templates use the "main" div.
Unbeknownst to me, the innerHTML function attached to the body tag allows me to change actual div tags using replace. So it is simple:
input ='<div id="main">';
output='<div id="main" itemtype="http://schema.org/SomeCategory" itemscope>';
document.body.innerHTML = document.body.innerHTML.replace(input,output);

Click HTML element without Id or Name with JavaScript in Android

I'm new programming with JavaScript, I'm making and app to Loggin automatically in the Web of my University and get some data.
In JavaScript for change a value or make and action I first need to find the element in the HTTP code with:
document.getElementsByName or
document.getElementById
But if I have this piece of HTML code with no Id or name:
ALUMNOS
How can I get the href, or click them, or click the item that contains it?
You can refer to the element with document.querySelector("a[target='Menu']"). Works since Android 2.3.
<!DOCTYPE html>
<html>
<body>
<a onclick="myFunction()" href="/wal/gupmenug.menu?p_sistema_c=ALUMNOS&p_sistemaid_n=3&p_menupredid_n=3&p_pidm_n=617047&p_majr_c=617047" target="Menu">ALUMNOS</a>
<script>
function myFunction() {
var list = document.getElementsByTagName("a");
alert(list[0].href);
return false;
}
</script>
</body>
</html>
You need to search for the anchor tag in the body of page. This is done using below code:
$('body').find('a')
But the only issue is, there can be multiple anchor tags on the page. In order to pick your anchor tag of interest, you can compare the target attribute which has a value "Menu" in your case. Below is the code for that:
$('a[target="Menu"]').click();

create link in javascript function with --- innerHTML = "...<a href='http://...'>HttpLink</a>..."

I'm learning to write with html, but I have one problem I cannot understand.
The following code works in other browsers but not in IE9. I know it has something to do with innerHTML but I could not understand the answers I found for this.
<html> <head> <script type="text/javascript">
function hw_function1() {
var img11=document.createElement("a");
img11.innerHTML = "<html> <body> <a href='http://google.de'>Google</a> </body></html>";
document.body.appendChild( img11 );
}
</script>
<body>
<a href="#" onclick="javascript:hw_function1()";>Test</a>
</body> </html>
What should I change WITHOUT changing the structure (only the innerHTMl-part if possible)?
Since you're creating an a element, you simply assign the href to the element via the .href property.
You can set its text content with .innerHTML as a convenience, though it's not really a "pure" approach.
var img11=document.createElement("a");
img11.href='http://google.de';
img11.innerHTML = 'Google';
document.body.appendChild( img11 );
Another way to set the text content would be like this...
img11.appendChild(document.createTextNode("Google"));
You code is creating another HTML page inside the original. That is wrong and invalid. It's because some browsers are forgiving and correcting things that your code even works.
If you're creating a hyperlink element, you should be adding text or an image or other inline elements inside it using innerHTML.
You should change its attribute to set the href with img11.href='http://xyz.com';

Script to change value of a text - Javascript

From this question i came to know text element's value can be changed by JS Set maximum number of item in Select List - html
can anyone give some code or some tips ?
My intention is not hacking, i need to know this, coz i'm writing a web app where most of the validation is done by JS
Edit
Looking for guide on running JS from client side on a page served by a server [on some text where it's readonly="true" ] !
For example, if you have a html text element like this:
<p id="textelement">I am a text element</p>
You can change the text inside with JS like this:
<script type="text/javascript">
document.getElementById("textelement").innerHTML = "New text inside the text element!";
</script>
You can use this technique with any HTML element which can contain text, such as options in a select list (<option> tag). You can select elements in other ways:
getElementById() Accesses the first element with the specified id
getElementsByName() Accesses all elements with a specified name
getElementsByTagName() Accesses all elements with a specified tagname
More info here.
PS - If you want to change the value of an element's attribute, and not its inner text, you should use the setAttribute() method; for example, if you have:
...
<option id="optionone" value="red">Nice color</option>
...
and want to change the value attribute, you should do:
<script type="text/javascript">
document.getElementById("optionone").setAttribute("value", "green");
</script>
More about this here.

Categories