使用纯Javascript复制元素并更改类

Question

使用纯Javascript复制元素并更改类

3

晚上好，我想复制一个HTML菜单并仅使用纯JavaScript（即没有jQuery）更改它的类。

输入：

<header>
    <nav class="page-nav">
        <ul class="social"><li>...</li></ul>
    </nav>
</header>
<main>...</main>
<footer>
    <nav class="footer">
        <ul class="footer-menu"><li>...</li></ul>
    </nav>
</footer>

.footer-menu被复制到.page-nav中，类名更改为.main-menu。

输出结果:

<header>
    <nav class="page-nav">
        <ul class="social"><li>...</li></ul>
        <ul class="main-menu"><li>...</li></ul>
    </nav>
</header>
<main>...</main>
<footer>
    <nav class="footer">
        <ul class="footer-menu"><li>...</li></ul>
    </nav>
</footer>

希望能得到任何帮助。

谢谢。

编辑...我尝试过以下代码，但虽然它创建了包装器，但没有创建任何内容...

var menuBar = (function () {
    var footerMenu = document.querySelector('.footer-menu'),
        headerMenu = document.querySelector('.page-nav');

    function init() {
        var wrapper = document.createElement('ul');
        wrapper.setAttribute("class", "main-menu");
        headerMenu.insertBefore(wrapper, headerMenu.childNodes[0]);
        wrapper.appendChild(footerMenu.childNodes);
    }

    init();

})();

- Jamie

3

那么，你尝试了什么？ - epascarello

2

我相信有很多重复的问题，涉及复制元素以及更改其类。 - Roope

我已经尝试了一些方法。至于重复的问题，我从副本中复制了内容。关于更改类别，我发现我找到的示例都是更改标题和页脚元素的类别，所以我尝试创建包装元素并附加页脚菜单的子节点（请参见我的编辑）。 - Jamie

6个回答

2

试试这个：

首先克隆节点

var clone = document.querySelectorAll(".one")[0].cloneNode(true);

接下来将克隆的节点添加到指定位置

document.querySelectorAll(".two")[0].appendChild(clone);

然后更改克隆元素的类

document.querySelectorAll(".two .one")[0].className = "cloned";

示例：https://jsfiddle.net/5zjvved6/1/

- rorymorris89

1

1) 克隆 .footer-menu 元素以实现深度克隆（确保复制元素的子元素）：

var copy = document.getElementsByClassName('footer-menu');

2) 将此副本的类名设置为新的类名：

copy.setAttribute('class', 'main-menu');

将复制内容添加到 nav.page-nav 元素中：

document.getElementsByClassName('page-nav')
  .appenChild (copy);

- Pineda

使用 setAttribute 相比于 className 有什么好处吗？ - Jamie

@Jamie：setAttribute设置属性，.className设置属性。由于OP的问题涉及更改HTML节点，我更喜欢前一种方法。这里是一个SO答案。 - Pineda

0

var footerMenu - document.getElementsByClassName('footer-menu')[0].cloneNode(true);
footerMenu.className = 'main-menu';

document.getElementsByClassName('page-nav')[0].appenChild(footerMenu);

这是我的代码，请试一下

- Nguyễn Hòang

0

var Hello = document.getElementById("Fdiv");

Hello.className = "Bye!";

<html>
    <head><title>Test</title></head>
    <body>
        <div class="Hello" id="Fdiv">
            <p>Hello world!</p>
        </div>
        <script src="notstyle.js"></script>
    </body>
</html>

Solution

如果你想改变类，可以使用(AnyElement).className = "String"。

提示

我建议您为不更改的元素添加一个ID，这样即使类别更改后，您也可以稍后引用它。

资源

我强烈推荐一个资源，特别是对于像您这样的新手，那就是Mozilla开发者网络(MDN)。他们提供了关于JavaScript、HTML和CSS的所有知识。

- user7208198

0

这个有效。

var doc = document;
var pageNav = doc.getElementsByClassName("page-nav")[0];
var socialList = doc.getElementsByClassName("social")[0];
var footerMenu = doc.getElementsByClassName("footer-menu")[0];
var footerItems = footerMenu.getElementsByTagName("li");
var text;
var item;
var mainMenu = doc.createElement("ul");
mainMenu.classList.add("main-menu");

for (var i = 0; i < footerItems.length; i++) {
  text = doc.createTextNode(footerItems[i].innerHTML);
  item = doc.createElement("li");
  item.appendChild(text);
  mainMenu.appendChild(item);
}

pageNav.appendChild(mainMenu);

.socal{
  background:grey;
}
.main-menu{
  background:blue;
  color:white;
}
.footer-menu{
  background:green;
  color:white;
}

<header>
    <nav class="page-nav">
        <ul class="social">
          <li>apple</li>
          <li>orange</li>
        </ul>
    </nav>
</header>
<main>
</main>
<footer>
    <nav class="footer">
        <ul class="footer-menu">
          <li>up</li>
          <li>down</li>
        </ul>
    </nav>
</footer>

- Ronnie Royston

我相当确定这会起作用，但与其他建议相比，这似乎是一种复杂的方法。这样做有什么好处吗？ - Jamie

它在“运行代码片段”嵌入式演示中肯定有效。我明白你的观点。.cloneNode似乎是更好的工具，但上面是我如何做到的。不过我学到了新东西（cloneNode）！ - Ronnie Royston

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- zer00ne · Accepted Answer

六行代码使用：

.querySelector()........: 参考

.cloneNode()................: 复制

.classList/className: 重命名

.appendChild().............: 重新定位

详细信息在片段中有注释。

// Reference the .footer-menu
var ftMenu = document.querySelector('.footer-menu');

// Reference the .page-nav
var pgNav = document.querySelector('.page-nav');

// Clone the .footer-menu
var dupe = ftMenu.cloneNode(true);

// Clear .footer-menu of any classes
dupe.className = "";

// Add .main-menu to .footer-menu's clone
dupe.classList.add('main-menu');

// Append the clone of .footer-menu to .page-nav
pgNav.appendChild(dupe);

.main-menu {
  border: 2px solid white;
  background: red;
  color: white;
  width: 250px;
}

.footer-menu {
  border: 1px solid black;
  background: tomato;
  width: 250px;
}

footer,
header {
  border: 2px dashed blue;
}

footer {
  background: seagreen
}

header {
  background: goldenrod;
}

main {
  background: brown;
  color: white
}

.social {
  background: lightblue;
  border: 2px solid grey;
  width: 250px;
}

<header>
  HEADER
  <nav class="page-nav">
    <ul class="social">
      <li>FB</li>
      <li>TW</li>
    </ul>
  </nav>
</header>
<main>
  MAIN CONTENT
</main>
<footer>
  FOOTER
  <nav class="footer">
    <ul class="footer-menu">
      <li>SO</li>
      <li>MDN</li>
      <li>DT</li>
    </ul>
  </nav>
</footer>