javascript - load HTML into <div>

Question

Fiddle: https://jsfiddle.net/x9ghz1ko/ (With comments.)

I have an HTML-document, inside of this document, there are two sections: <section class="desktop_only"> and <section class="mobile_only"> – In the code, before these sections, there is a script, this script should delete one of the two sections, but the problem is: For this to work, I have to place the script after the sections but I can't do that, because there are more scripts inside of the sections and I have to delete them before they run.

Simplified version of my code: (…not working.)

<script>
device = "desktop"; // This could be either: "desktop", or: "mobile"

if(device === "desktop"){
        document.querySelector(".mobile_only").remove(); // Not doing anything.
} else {
        document.querySelector(".desktop_only").remove(); // Not doing anything.
}
</script>

<section class="desktop_only">
    <script src="example.js"></script>
    <script> console.log("desktop_only") </script>
    <div> desktop </div>
</section>

<section class="mobile_only">
    <script src="example.js"></script>
    <script> console.log("mobile_only") </script>
    <div> mobile (Delete this.) </div>
</section>

Answer 1

I think DOMContentLoaded is what you are looking for. This event fires when the initial HTML document has been completely loaded.

<script>
  var device = "desktop"; // This could be either: "desktop", or: "mobile"

  document.addEventListener("DOMContentLoaded", function(event) {
    if(device === "desktop")
      document.querySelector(".mobile_only").remove(); // Not doing anything.
    else
      document.querySelector(".desktop_only").remove(); // Not doing anything.
  });
</script>

<section class="desktop_only">
    <script src="example.js"></script>
    <script> console.log("desktop_only") </script>
    <div> desktop </div>
</section>

<section class="mobile_only">
    <script src="example.js"></script>
    <script> console.log("mobile_only") </script>
    <div> mobile (Delete this.) </div>
</section>