normal DSL.js

<tbody>
{% for child in user.children if user.isFemale %}
  <tr>
    <td>{{ child }}</td>
  </tr>
{% endfor %}
</tbody>

pure dom

function build(user) {
  var tbody = document.createElement("tbody");

  user.isFemale && user.children.forEach(loadTRFromChild);

  function loadTRFromChild(child) {
    var node = createTR(child);
    tbody.appendChild(node);
  }

}

function createTR(child) {
  var tr = document.createElement("tr");

  var td = document.createElement("td");
  tr.appendChild(td);

  td.textContent = child;

  return tr;
}

trinity.js

// x.html
<tbody></tbody>
// x.js
var tbody = frag.firstChild, user = data;

user.isFemale && user.children.forEach(loadTRFromChild);

function loadTRFromChild(child) {
  var node = load("child", child);
  tbody.appendChild(node);
}
// child.html
<tr><td></td></tr>
// child.js
var td = frag.firstChild.firstChild;
td.textContent = data;