javascript – How to abstract DOM manipulation in a simple intuitive way

I am building a library to abstract DOM manipulation. Here’s what the usage looks like:

  vsAddToSection() {

    let _inChapter: c.InChapter;

    let v$sections = vmap((), _ =>
      vh('div.section.item', {}, {
        listeners: {
          click: (e, __) => {
            this.ctrl.inSection(_inChapter, _)
          }
        }
      }, (h('span', _.name))));

    let v$backToABook = this.vBackToABook(),
    v$backToBook = this.vBackToBook();

    let update = (inChapter: c.InChapter) => {
      _inChapter = inChapter;
      v$backToBook.update(inChapter);
      v$backToBook.update(inChapter);
      v$sections.update(inChapter.sections);
    };

    return (update, (
      v$backToABook,
      v$backToBook,
      h('div.sections', v$sections),
      vh('button', {}, {
        listeners: {
          click: (e, _) => {
            this.ctrl.toNew.pub(_inChapter);
          }
        }
      }, (h('i', '+'), h('span', 'New Section')))
    ));
  }


  vAddToBookPopup() {

    let v$content = vex((h('div', 'default')));

    let (vs$addToBookUpdate, vs$addToBook) = this.vsAddToBook(),
    (vs$addToChapterUpdate, vs$addToChapter) = this.vsAddToChapter(),
    (vs$addToSectionUpdate, vs$addToSection) = this.vsAddToSection();




    this.ctrl.addTo.sub(addTo => {
      if (c.isInABook(addTo)) {
        vs$addToBookUpdate(addTo);
        v$content.replace(vs$addToBook);
      } else if (c.isInBook(addTo)) {
        vs$addToChapterUpdate(addTo);
        v$content.replace(vs$addToChapter);
      } else if (c.isInChapter(addTo)) {
        vs$addToSectionUpdate(addTo);
        v$content.replace(vs$addToSection);
      } else if (c.isInSection(addTo)) {
        // console.log(addTo);
        // selected
      }
    });

    return h('div.popup.addtobook', (v$content));
  }

vh creates a dom node, adds event listeners to it, etc.
h is a wrapper around vh.
vmap takes an array of data, and a function to create children dom nodes. The abstraction has an update method to update the array of data so it can remove old children dom nodes, and create and add new children.
vex takes an array of vh abstraction and has a replace method that replaces the dom contents with the new array of vh‘s.

this.ctrl.addTo.sub listens to an event that updates the dom, like this:

vs$addToBookUpdate(addTo);
v$content.replace(vs$addToBook);

This updates the contents of a piece of dom, and replaces the parent dom with that new piece of dom.

I return two values from vsAddToSection function, one for to update the abstraction, one returns the abstraction itself to append.

Hope this makes sense, my goal is simplicity, something that works, and avoid using external dependencies. Is this a little cumbersome, should I stick to a regular virtual dom approach?