Question: Dynamic Changes vanish when load from DB

[codingmachine16]

@artf

Here is my code , I am adding test in a div on select change

    init() {
      this.listenTo(this, "change:noOfLinks", this.getInfoLinks);
    },


    getInfoLinks() {
      let canvasDoc = editor.Canvas.getDocument();
      canvasDoc.getElementById("infoLinks").innerHTML = " test text ";
      
      editor.trigger("change:selectedComponent");
      editor.TraitManager.getTraitsViewer().render();
    },

You can see script is working fine and "test text" is displaying

When I press save button. It saves in DB and when I refresh editor, it loads data but the changes "test text" is not there

Please help what I am missing in the code. Thanks

[artf]

You have to change the Component Model and not the DOM elements, please read carefully about Components

[codingmachine16]

Got it . Thanks alot

[codingmachine16]

@artf

I have tried to update model, it is updating every thing expect content

      const el = wrapper.find("#infoLinks")[0];
      el.set({ tagName: "a" });
      el.set({ type: "link" });
      el.set({ style: { "background-color": "red" } });
      el.set({ content: "test text" });
      el.set({ attributes: { title: "Hello!" } });

This line is not updating
el.set({ content: "test text" });
please suggest a solution. Thanks

[artf]

do this el.components('test text')

[codingmachine16]

Thanks alot @artf

I did
el.append("Test text"); and it is working fine.