appendChild() to a DOM node not working

LittleYe233 · November 4, 2024, 8:42am

I am writing a JS plugin that renders a custom widget. The code structure is like:

// It is stored somewhere like $:/plugins/LittleYe233/MyPlugin/widget.js, which is a normal tiddler

function foo() {
  const node = $tw.utils.domMaker('div');
  // ...
  return node;
}

MyWidget.prototype.create = function(parent, nextSibling) {
  let container = $tw.utils.domMaker('div');
  // ...
  const node = foo();
  container.appendChild(node);
  // ...
  return container;
}

I found that container.appendChild(node) was not working as expected (appending node to container), even if it worked in the browser console. I have searched in the Internet and still can’t figure it out. Any reply will be highly appreciated.

buggyj · November 4, 2024, 10:50am

HI LittleYe233

I usual copy the pattern of existing widgets, take a look at this one.

github.com

TiddlyWiki/TiddlyWiki5/blob/master/core/modules/widgets/text.js#L29

    
      
          };
          
          
/*
          Inherit from the base widget class
          */
          TextNodeWidget.prototype = new Widget();
          
          
/*
          Render this widget into the DOM
          */
          TextNodeWidget.prototype.render = function(parent,nextSibling) {
          	this.parentDomNode = parent;
          	this.computeAttributes();
          	this.execute();
          	var text = this.getAttribute("text",this.parseTreeNode.text || "");
          	text = text.replace(/\r/mg,"");
          	var textNode = this.document.createTextNode(text);
          	parent.insertBefore(textNode,nextSibling);
          	this.domNodes.push(textNode);
          };

LittleYe233 · November 4, 2024, 11:49am

Thank you for your quick reply! I am too embarrassed that I just found that I overwrote container after appendChild() so that I couldn’t get the correct result. I have tested that both of your snippet and appendChild() work well.