JavaScript innerHTML werkt element niet bij

Hier is een heel eenvoudig programma en de uitvoer zou JavaScriptmoeten zijn, maar ik krijg alleen s.

<html>
    <head>
        <title></title>
        <script type="text/javascript">
          document.getElementById("ma").innerHTML="JavaScript";
        </script>
    </head>
    <body>
        <h1 id="ma">s</h1>
    </body>
</html>

Antwoord 1, autoriteit 100%

Het element bestaat niet op het moment dat u een waarde probeert in te stellen. Je moet dit aanroepen nadat de <h1>is toegevoegd aan de DOM.

U kunt deze <script>-tag verder naar beneden verplaatsen, of uw logica toevoegen aan een functie die moet worden aangeroepen wanneer het document is geladen:

window.onload = function() {
    /* Add your logic here */
}

Demo: http://jsfiddle.net/Lr2Hm/


Antwoord 2, autoriteit 37%

Je hebt 2 keuzes:

window.onload = function() {
  //your script here
}

of

<body>
    <h1 id="ma">s</h1>
    <script type='text/javascript'>
        //your script here
    </script>
</body>

Antwoord 3, autoriteit 34%

Je moet wachten tot de DOM is geladen.

window.onload = function(){
    document.getElementById("ma").innerHTML="JavaScript";
}

Antwoord 4, autoriteit 3%

Merk op dat alles wat je schrijft met element.innerHTML=”anything” de daadwerkelijke inhoud van je element zal vervangen. Als je meer inhoud wilt toevoegen, moet je alles opslaan in een cumulatieve variabele, ook de feitelijke inhoud van je element, om het te behouden, en deze variabele vervolgens ontleden in innerHTML wanneer de inhoud vol is.

<script type=text/javascript">
var MyFullVar = element.innerHTML + "my new content I want to add";
element.innerHTML = MyFullVar;
</script>

Antwoord 5, autoriteit 3%

U kunt ook het trefwoord defergebruiken met een script om het uit te voeren nadat de DOM is geïnitialiseerd

<script type=text/javascript" defer>/*Your script here*/</script>

Antwoord 6

Je zou dit ook kunnen doen…

<script type=text/javascript">
    window.onload = function () {
        var element = document.getElementById('element').innerHTML;
        var content = ".........";
        element.innerHTML += content.toString();
    }
    </script>

Volgens w3schoolsen basis JavaScript-regels werkt dit. Ik heb dit ook al eerder geprobeerd.

Dit is gebaseerd op de onload-functie om de code automatisch uit te voeren bij het opstarten. Het maakt ook gebruik van de JS Assignment Operators om de code snel en efficiënt uit te voeren.


Antwoord 7

De geboden opties werkten niet voor mij.
document.querySelectorwerkte voor mij!

bijvoorbeeld:

document.querySelector("#ma").innerHTML = "HELLO";

Other episodes