清单 7. 创建 <div> 的简便方法
function handle_button() {
    var parent = document.getElementById('myContainer');
    parent.appendChild(elem('div',
      {class: 'myDivCSSClass', id: 'myDivId'}
      {position: 'absolute', left: '300px', top: '200px'},
      'This is the first text of the rest of this code'));
}

    在您想要快速创建大量复杂的 DHTML 对象时，这种实用工具可以节省您大量的时间。模式在这里就是指，如果您有一种需要频繁创建的特定的 DOM 结构，则使用实用工具来创建它们。这不但减少了您编写的代码量，而且也减少了重复的剪切、粘贴代码（错误的罪魁祸首），并且在阅读代码时思路更加清晰。
   
    接下来是什么？
    DOM 通常很难告诉您，按照文档的顺序，下一个节点是什么。下面有一些实用工具，可以帮助您在节点间前后移动：

清单 8. nextNode 和 prevNode
// return next node in document order
function nextNode(node) {
    if (!node) return null;
    if (node.firstChild){
        return node.firstChild;
    } else {
        return nextWide(node);
    }
}
// helper function for nextNode()
function nextWide(node) {
    if (!node) return null;
    if (node.nextSibling) {
        return node.nextSibling;
    } else {
        return nextWide(node.parentNode);
    }
}
// return previous node in document order
function prevNode(node) {
    if (!node) return null;
    if (node.previousSibling) {
      return previousDeep(node.previousSibling);
    }
    return node.parentNode;
}
// helper function for prevNode()
function previousDeep(node) {
    if (!node) return null;
    while (node.childNodes.length) {
        node = node.lastChild;
    }
    return node;
}