Javascript 在Chrome扩展中使用JQuery将整个DIV替换为自定义DIV

我正在为我们使用的内部工具在Chrome中构建一个扩展。我们已经有了这个工具好几年了，导航菜单在Chrome中从来没有使用过。开发商拒绝修复它。因此，我试图用扩展插件做的部分工作是用功能菜单替换菜单

目前，菜单被包装在一个DIV中。我想用一个工作菜单替换整个DIV。起初我认为使用JQuery的replaceWith（）函数很容易，但replaceWith（）似乎只适用于单个代码段。我能够轻松地用一个元素替换整个菜单。然后我遇到了.load（），但我无法成功地将扩展文件夹中的.html文件实际加载

我缩短了此菜单，但它是当前DIV的一个示例：

<div id="ctl00_MasterMenu" class="MenuStyle ctl00_MasterMenu_5" style="height:20px;">
<span class="MenuItemStyle ctl00_MasterMenu_4">
<a class="ctl00_MasterMenu_1 MenuItemStyle ctl00_MasterMenu_3" href="default.aspx" style="border-style:none;font-size:1em;">Home</a>
</span> 
<span class="MenuItemStyle ctl00_MasterMenu_4">
<a class="ctl00_MasterMenu_1 MenuItemStyle ctl00_MasterMenu_3" href="javascript:__doPostBack('ctl00$MasterMenu','o6')" style="border-style:none;font-size:1em;">New Ticket Expand New Ticket</a>
</span> 
</div>

我基本上想用这样的东西来代替它：

<ul>
<li>Home</li>
<li>New Item</li>
<li>New Item2</li>
</ul>

家
新项目
新项目2

只需在

中循环子元素，并将其替换为

，然后最后将父元素替换为

：

$(document).ready(function() {
    var $menu = $("#ctl00_MasterMenu");

    $menu.children("span").each(function(index) {
        $(this).replaceWith("<li>"+$(this).html()+"</li>");
    });

    $menu.replaceWith("<ul>"+$menu.html()+"</ul>");
});

$（文档）.ready（函数（）{
var$menu=$（“#ctl00_主菜单”）；
$menu.children（“span”）。每个（函数（索引）{
$（this.replace为（“
”+$（this.html（）+”
”）；
});
$menu.replace为（“
”+$menu.html（）+“
”）；
});

---

请看这里的小提琴-

类似的东西可能会起到作用：

// store the parent div's info
var $parent = $('#ctl00_MasterMenu');
var parentID = $('#ctl00_MasterMenu').attr('id');
var parentClass = $('#ctl00_MasterMenu').attr('class');
var parentStyle = $('#ctl00_MasterMenu').attr('style');

// create li elements for each of the spans
$parent.children().each(function(index, child){
    $(child).replaceWith('<li class="'+$(child).attr('class')+'">'+$(child).html()+'</li>');
});

// create the ul element and copy the attributes
$parent.children().wrapAll('<ul id="'+parentID+'" class="'+parentClass+'" style="'+parentStyle+'"/>');

// remove the old div
$parent.replaceWith($parent.html());

//存储父div的信息
var$parent=$（“#ctl00_主菜单”）；
var parentID=$（'#ctl00_主菜单'）.attr（'id'）；
var parentClass=$（'#ctl00_主菜单'）.attr（'class'）；
var parentStyle=$（'ctl00_主菜单'）.attr（'style'）；
//为每个跨度创建li图元
$parent.children（）.each（函数（索引，子函数）{
$（child.replaceWith（“
“+$（child.html（）+”
”）；
});
//创建ul元素并复制属性
$parent.children（）；
//拆下旧的div
$parent.replaceWith（$parent.html（））；

---

演示：

但示例中的项目与所需结果中的项目不匹配。“新项目”和“新项目2”在哪里？Terry-这个

的东西将取代游戏中的所有东西，所以真正的DIV会保留下来，但两者之间的所有东西都会被
的东西所取代。