如何使用 YUI 进行基本的 DOM 操作（清除内容、附加到内容）？答案

【问题标题】：How to do basic DOM manipulation (clear content, append to content) with YUI?如何使用 YUI 进行基本的 DOM 操作（清除内容、附加到内容）？
【发布时间】：2009-07-09 18:24:28
【问题描述】：

我正在用 YUI 做一个项目，我尝试做一些我以前用 jQuery 做过的事情。我发现很难进行一些基本操作，即：

清除DOM元素的内容
附加到 DOM 元素的内容

在 jQuery 中，我会这样做：

$(".someSelector").empty().append("<div>something</div>");

如何在 YUI 中进行上述操作？似乎它在许多方面都遵循 W3C DOM 规范，我对那个规范不是很熟悉。如果我应该使用任何特定的 W3C 或此类材料，请提供具体链接。

【问题讨论】：

标签： jquery dom yui

【解决方案1】：

这是 Dom 方法的 YUI 文档。
Yahoo! UI Library > dom > YAHOO.util.Dom
或者试试

YAHOO.util.Dom.get("somediv").innerHTML("<div>something</div>");

【讨论】：

是的，看起来我只需要操作 innerHTML。不知何故，jQuery API 感觉更优雅。

【解决方案2】：

YUI 似乎没有提供与 jQuery 相同级别的 DOM 操作（虽然我还没有玩过 YUI3，所以这可能会改变）。

innerHTML 确实有效，并且曾经更快，尽管我认为这在某些现代浏览器中正在发生变化。通过标准方法添加内容很容易：

element.appendChild(childElement);

清算涉及更多。实际上，我最终扩展了 YUI DOM 实用程序并将其添加为一种方法：

removeChildren : function(elem)
{
    var theElement = this.get(elem);
    var elemChildren = theElement.childNodes;
    var childCount = elemChildren.length;
    for (var i = childCount -1; i >= 0; i--)
    {
        theElement.removeChild(theElement.childNodes[i]);
    }
}

重要的是要注意，在遍历子节点时，我从最后一个元素开始，然后一直走到前面。这是因为每当删除一个节点时，数组的大小就会发生变化。此外，如果我删除位置 [0] 处的节点，则数组的所有元素都会向下移动一个位置（意味着位置 [1] 处的元素现在变成位置 [0] 处的元素）。如果我从数组的前面开始，我会错过元素，并很快超出数组的边界。

【讨论】：