How to use yo-yo - 10 common examples

function render () {
  // render view
  yo.update(document.querySelector('#el-content'), yo`<div id="el-content" class="pane">
    <div class="subscriptions">
      <h4>Watched Folders</h4>
      ${renderArchives(archives, { showHead: true })}
    </div>
  </div>`)
}

function update () {
  // TODO(bgimg) restore when background images are restored -prf
  // var theme = settings.start_page_background_image

  yo.update(document.querySelector('.window-content.start'), yo`
    <div class="window-content builtin start ${''/* TODO(bgimg) theme */}">
      <div class="builtin-wrapper start-wrapper">
        <div class="header-actions">
          ${renderHelpButton()}
        </div>
        ${MOTD.render()}
        <div class="autocomplete-container search-container">
          <input placeholder="Search the Web, your Library, bookmarks, and more" class="search" type="text"> delay(onInputSearch, e)}/&gt;
          <i class="fa fa-search"></i>

          <button title="Submit search query" class="btn primary search-btn">
            <i class="fa fa-arrow-right"></i>
          </button>

          ${query.length &amp;&amp; isSearchFocused ? yo`
            <div class="search-results autocomplete-results">${searchResults.map(renderSearchResult)}</div>`</div></div></div>

function render () {
  yo.update(document.querySelector('main'), yo`<main>
    <div class="modal">
      <div class="modal-inner">
        <div class="select-archive-modal">
          ${renderActiveViewContent()}
        </div>
      </div>
    </div>
  </main>`)
  adjustWindowHeight('main')
}

function update () {
  yo.update(document.querySelector('.filesystem-wrapper'), yo`
    <div class="filesystem-wrapper builtin-wrapper">
      <div class="builtin-main">
        ${filesBrowser.render()}
      </div>
    </div>
  `)
}

function render () {
  yo.update(document.querySelector('.downloads-wrapper'), yo`
    <div class="downloads-wrapper builtin-wrapper">
      ${renderHeader()}

      <div class="builtin-main">
        ${renderDownloadsList(downloadsList)}
      </div>
    </div>
  `)
}

function renderUsage (err) {
  yo.update(document.querySelector('main'), yo`
    <main>
      <h1>${err}</h1>
      <h2>A valid dat URL is required in the URL path.</h2>
    </main>
  `)
}

function update () {
  yo.update(document.querySelector('.current-user-dropdown-menu'), render())
}

onclick=${this.evtSaveHandle.bind(this)}>
              Save Handle
            
          
        
        <div class="w-100 pa3 center">
          <p class="f6 f5-ns lh-copy">
            </p><div class="w-100 mr3 ml3 f6 code">IPFS RSA Public Key [signing only]</div>
            <textarea title="IPFS Public Key [Signing Only]" class="h5 flex w-80 lh-copy code f7 ma3 bg-white br3 ph3 pv2 mb2 overflow-auto" disabled="">${IpfsID.identity.profile.pubKeyBase64}</textarea>
          <p></p>
        </div>
      `
      const existingElement = document.querySelector(selector)
      html.update(existingElement, newElement)
  }
}

function hide () {
    lastId = null
    elem = yo.update(elem, render())
  }