javascript - 递归扫描 DOM 元素 - Javascript

Question

我有以下 html -

<a>
  <b>
   ....

    .....
    <input type="button" name="add" onclick="..." value="add another"/>
    </d>
   </b>
....
</a>

我使用以下 js 片段 -

/**
 *  Dynamically add a remove button on next to the add button.
 *
 */
addRemoveButton = function(node) {
    if(node.nodeType == 3) {
        if(node.nodeName == "input") {
            if(node.getAttribute("type") == "button") {
                if(node.getAttribute("name") == "add") {
                    var removeButton = node.cloneNode(true);
                    removeButton.removeAttribute("name");
                    removeButton.setAttribute("value", "remove");
                    removeButton.setAttribute("onclick", "");
                    removeButton.setAttribute("id", "");
                    (node.parentNode).appendChild(removeButton);
                    return;
                }
            }
        }
    }
    if(node.nodeType == 1) {
        var list = node.childNodes;
        var i = 0;
        while(i<list.length) {
            return addRemoveButton(list[i]);
            i++;
        }
    }
    return;
}

现在我想在上面列表中显示的当前按钮旁边添加一个按钮类型的输入(删除按钮)。我尝试递归地执行此操作。但这是行不通的。你能发现上面代码的问题吗？

Answer 1

据我所知，您的代码相差甚远。您使用了错误的nodeType，并且nodeName 的大小写也错误，并且没有理由使用大量嵌套的if 语句。但是，你可以让它像这样递归地工作:

addRemoveButton = function(node) {
    if (node.nodeType == 1) {
        if (node.nodeName.toLowerCase() == "input" &&
          node.getAttribute("type") == "button" &&
          node.getAttribute("name") == "add") {
            var removeButton = node.cloneNode(true);
            removeButton.removeAttribute("name");
            removeButton.setAttribute("value", "remove");
            removeButton.setAttribute("onclick", "");
            removeButton.setAttribute("id", "");
            (node.parentNode).appendChild(removeButton);
            return;
        } else {
            var list = node.childNodes;
            for (var i=0; i < list.length; i++) {
                // be aware of childNodes changing on us live here
                // when we modify the DOM
                addRemoveButton(list[i]);
            }
        }
    }
}

addRemoveButton(document.body);

您可以在这里看到它的工作原理:http://jsfiddle.net/jfriend00/WCj4b/

使用 jQuery(您也用它标记了您的问题)并继续使用克隆操作，您可以执行以下操作:

$("input[type='button'][name='add']").each(function(index, el) {
    $(this).clone(false)
        .val("remove")
        .removeAttr("name")
        .attr("onclick", "")
        .attr("id", "")
        .insertAfter(this);
});

此处演示:http://jsfiddle.net/jfriend00/JKsZC/

或者一个非常非常简单的版本，只插入新的 HTML 而不是克隆现有按钮:

$("input[type='button'][name='add']").after('<input type="button" value="Remove" />');

此处演示:http://jsfiddle.net/jfriend00/vSZwp/