MagicMirror Forum
    • Recent
    • Tags
    • Unsolved
    • Solved
    • MagicMirror² Repository
    • Documentation
    • 3rd-Party-Modules
    • Donate
    • Discord
    • Register
    • Login
    A New Chapter for MagicMirror: The Community Takes the Lead
    Read the statement by Michael Teeuw here.

    How to only update specific parts of DOM

    Scheduled Pinned Locked Moved Development
    2 Posts 2 Posters 1.6k Views 2 Watching
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • S Offline
      Synthic
      last edited by

      Hey there.

      I’m working on my own module where my DOM consists of some text and an animated gif.

      What I want to do is to change the text without refreshing the animated gif.

      This function is called with the appropriate argument from the getDom() function:

      createHTML: function(text) {
              var wrapper = document.createElement("div");
      
              var t = document.createElement("div");
              t.innerHTML = text;
      
              var img = document.createElement("IMG");
              img.src = this.file("glowing-ring.gif");
              
              wrapper.appendChild(t);
              wrapper.appendChild(img);
              return wrapper;
          },
      

      Is there any way to achieve this? I assume the system update the dom because the object returned is a whole new object. Would it work to retrieve the current DOM and simply change the innerHTML of the div and then return the same object. Would the system then recognize that only the text is changing?

      Thanks!

      D 1 Reply Last reply Reply Quote 0
      • D Offline
        doubleT Module Developer @Synthic
        last edited by doubleT

        @Synthic
        Call the text div directly. But since document.getelementsbytagname is messy (as is document.getelementsbyclassname) you should give this div an ID.

        var t = document.createElement("div");
        t.id = "textarea";
        t.innerHTML = "text";
        // ...
        var u = document.getelementbyid("textarea");
        u.innerHTML = "updated text";
        
        1 Reply Last reply Reply Quote 0
        • 1 / 1
        • First post
          Last post
        Enjoying MagicMirror? Please consider a donation!
        MagicMirror created by Michael Teeuw.
        Forum managed by Sam, technical setup by Karsten.
        This forum is using NodeBB as its core | Contributors
        Contact | Privacy Policy