YUI 替代 jQuery.replaceWith 和 jquery.append

Question

我有一些 jquery 代码，我正在尝试将其转换为 YUI。我正在使用 YUI 2.8。使用 jquery 我可以轻松替换 dom 元素。有没有一个好方法使用 YUI 代替 jquery.replaceWith 和 jquery.append。我尝试如下编写我的函数，但这些函数只能接受文本，而我需要传递渲染的 dom 之类的。

what

（比这复杂得多。）

function replaceWith(el_id, text){
    //YUI doesn't seem to have a good replacement for $.replaceWith. Writing one to simulate it for my usages.
    node_to_replace = YAHOO.util.Dom.get(el_id);
    if(node_to_replace){
    new_node = document.createTextNode(text);
    YAHOO.util.Dom.insertAfter(new_node, node_to_replace);
    node_to_replace.innerHTML = ''
    }
    return node_to_replace
}

function append(el_id, text){
    //YUI doesn't seem to have a good replacement for $.append. Writing one to simulate it for my usages.
    node_to_replace = YAHOO.util.Dom.get(el_id);
    if(node_to_replace){
    new_node = document.createTextNode(text);
    YAHOO.util.Dom.insertAfter(new_node, node_to_replace);
    }
    return node_to_replace
}

Answer 1

尝试用这个：

function replaceWith(el_id, text){
    var node_to_replace = YAHOO.util.Dom.get(el_id);
    if(node_to_replace){
        var new_node=document.createElement("div");
        new_node.innerHTML=text; //Parse the code inside a new element
        var beforeNode=node_to_replace;
        for(i=0;i<new_node.childNodes.length;i++){
           //Move generated children after the replaced node
           YAHOO.util.Dom.insertAfter(new_node.childNodes[i], beforeNode);
           beforeNode=new_node.childNodes[i];
        }
        node_to_replace.parentNode.removeChild(node_to_replace);//Remove the replaced element
    }
    return node_to_replace
}

function append(el_id, text){
    var node_to_replace = YAHOO.util.Dom.get(el_id);
    if(node_to_replace){
        var new_node=document.createElement("div");
        new_node.innerHTML=text; //Parse the code inside a new element
        for(i=0;i<new_node.childNodes.length;i++){
           //Move generated children inside the node
           node_to_replace.appendChild(new_node.childNodes[i]);
        }
    }
    return node_to_replace
}

Answer 2

这似乎对我有用：

function replaceWith(id, innerHTML) {
 var oldNode = YAHOO.util.Dom.get(id);
 var newNode = document.createElement(oldNode.tagName);
 newNode.id = id;
 newNode.innerHTML = innerHTML;
 YAHOO.util.Dom.get(id).parentNode.replaceChild(newNode, oldNode);
 return YAHOO.util.Dom.get(id);
}

function append(id, appendedText) {
 var elem = YAHOO.util.Dom.get(id);
 elem.innerHTML += appendedText;
 return elem;
}