How and why does getElementById not perform on page loading?

Asked

Viewed 83 times

0

Business problem: I’ll create a system that will run on a server-less platform. It can be a local administration area interface (a client for a service), or a mobile app. The application will load content dynamically, for easy updating and maintenance, using only client-side technology (CSS and javascript). Reasons do not come to the point not to pollute the topic.

Technical problem: The Document.write() object has a bad reputation for overwriting the document, and building every document with the write function is very complicated. So we usually choose to update content by getElementById, although many people recommend using AJAX or Jquery that for certain reasons do not work outside the server, for the scope of this project. However, getElementById does not load without calling a function in the code below, or even calling onload in Body:

<!DOCTYPE html>
<html>
<head>
    <title></title>

</head>
<body>
<div id="recebeProduto1"></div>


<script type="text/javascript">

        getElementById("recebeProduto1").innerHTML = "teste";

    </script>
</body>
</html>

Question: How and why getElementById does not load the page?

or

What alternatives to load content dynamically using Client-Side technology?

front-end dom javascript-events

  • Boy, it really is document.getElementById....

  • the idea is to explain why to avoid misunderstandings with javascript object, but yes! It is correct!

  • 1

    The method getElementById belongs to the object/class document, so there’s no way to access it directly, only through document.

  • However, when we call through a function, it makes content available. Because this?

  • 1

    When used within a function, the getElementById is within the context of document, however, it is always recommended to use the document, thus avoiding errors such as "function not found".

  • I have here the links related to this type of problem. Do you want to create a formal answer so I can mark as the best answer? https://www.w3.org/TR/DOM-Level-2-Core/core.html (getElementById introduced in DOM Level 2) https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById https://www.schools.com/jsref_obj_document.asp

  • No, it’s okay. The important thing is that you understand.

Show 2 more comments

1 answer

4

change your code to document.getElementById("recebeProduto1") for the getElementById is an object method document

<!DOCTYPE html>
<html>
<head>
    <title></title>

</head>
<body>
<div id="recebeProduto1"></div>


<script type="text/javascript">

        document.getElementById("recebeProduto1").innerHTML = "teste";

    </script>
</body>
</html>

Browser other questions tagged front-end dom javascript-events

You are not signed in. Login or sign up in order to post.