Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
1.2k views
in Technique[技术] by (71.8m points)

javascript - load HTML into <div>

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>

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

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>

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...