Link to home
Start Free TrialLog in
Avatar of gudii9
gudii9Flag for United States of America

asked on

document.getElementById("demo").innerHTML meaning

what is meaning of below
document.getElementById("demo").innerHTML

is it html or javascript or ajax or what syntax?

when we say document which document?
what it mean by innerHTML is there is somethong like outerHTML
what is getElementById

how do we give id to element
what are elements
if no id then what happens

please advise
SOLUTION
Avatar of Shaun Kline
Shaun Kline
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
ASKER CERTIFIED SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of gudii9

ASKER


Yes, there is a method called outerHTML. This method includes the HTML tag.
when we use outer HTML? any good example using outer html? please advise
mostly i saw innerhtml everywhere?
You use outerHTML whenever you want the outer HTML. It's less used because typically you search for a block element containing inner HTML and by searching for a certain tag name or id you typically already know what you find, you just are interested in the inner HTML of what you know must exist. Otherwise. if you wouldn't now that, your search would go up one level and again you're searching for the innerHTML.

Bye, Olaf.
Avatar of gudii9

ASKER

<!DOCTYPE html>
<html>
<body>

<p id="demo" onclick="myFunction()">Click me to chanage my HTML content (innerHTML).</p>

<script>
function myFunction() {
    document.getElementById("demo").innerHTML = "Paragraph changed!";
}
</script>

</body>
</html> 

Open in new window


above gave below outut
Click me to chanage my HTML content (innerHTML).
what is the start and end tag here?
please advise
https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_element_innerhtml
Avatar of gudii9

ASKER

<!DOCTYPE html>
<html>
<body>

<p id="demo" onclick="myFunction()">Click me to chanage my HTML content (outerHTML).</p>

<script>
function myFunction() {
    document.getElementById("demo").innerHTML = "Paragraph changed!";
}
</script>

</body>
</html> 

Open in new window


why i got weird output as below if used outerHTML
getElemetnById finds an element by its id. Here "demo" is searched.

Well, what HTML element has id="demo" in the HTML?

<p id="demo"...>

So, this searches for no tag, this searches for ID.

What is a p tag? p stands for a paragraph, so it's the paragraph. The inner HTML of a paragraph tag is the paragraph text, and that's what this w3school sample wants to show and teach you.

When you change that to overwrite outerHTML, you remove the paragraph tag, not just the paragraph text. You don't want that.

Everything will be simpler if you use jQuery instead of pure Javascript. w3school also isn't the best method to learn. It's soso, okay, to learn single concepts. You get better accompanying explanations elsewhere. For example, take https://www.codecademy.com/catalog/language/javascript

Bye, Olaf.
Avatar of gudii9

ASKER

what is myFunction() doing here?
It's doing what I described. It changes the paragraph text.

Bye, Olaf.
Avatar of gudii9

ASKER

Everything will be simpler if you use jQuery instead of pure Javascript. w3school also isn't the best method to learn. It's soso, okay, to learn single concepts. You get better accompanying explanations elsewhere. For example, take https://www.codecademy.com/catalog/language/javascript
any free site or site where i pay once and get the course rather than paying monthly?
Please advise
Codecademy is free, you don't need to upgrade to pro. You don't get to the pro lessons, but that's okay. You'll need a broad basis, so go for all the free lessons in HTML, CSS, JS, jQuery and more and then see whether you want to go for PRO.

Besides, there are many much more sites. Udemy has a model where you pay per course. And from time to time they offer most courses for 10USD.

Bye, Olaf.