Question

晚上好，我想复制一个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();

})();

Answer 1

使用以下六行代码：

.querySelector() ........：参考



.cloneNode() ................：复制



.classList / className：重命名



.appendChild() .............：重新安置

在Snippet中评论的详细信息

<小时/> 的段

// 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>

Answer 2

试试这个：

首先克隆节点

check.alpha

接下来将克隆的节点附加到位置

declare @d1 as datetime = '2099-08-22 03:10:18.000'
declare @d2 as datetime = '2017-03-22 00:00:00.000'

select
   cast(cast(@d1 as time) as datetime)
 , datediff(day,0,@d2)
 , dateadd(day, datediff(day,0,@d2), cast(cast(@d1 as time) as datetime))

+---------------------+-------+---------------------+
| 01.01.1900 03:10:18 | 42814 | 22.03.2017 03:10:18 |
+---------------------+-------+---------------------+

然后更改克隆元素的类

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

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

Answer 3

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

这是我的代码，试试吧

Answer 4

＆＃13;

var Hello = document.getElementById("Fdiv");

Hello.className = "Bye!";

＆＃13;

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

＆＃13;

＆＃13; 的解决方案

如果你想改变类，你可以使用（AnyElement）.className =＆＃34; String＆＃34;。

<强>提示

我建议你为你不会改变的元素添加一个ID，这样你甚至可以在课程改变之后再引用它。

<强>资源

我强烈推荐的一种资源，特别是像你这样的新手，是Mozilla开发者网络（MDN）。他们拥有您需要了解的有关javascript，HTML和CSS的所有内容。

Answer 5

1）对val deduped = clientMatrixDs.filter { var seq = Seq.empty[(String, String)] tuple => if (seq.exists(customEquals(tuple, _))) { false } else { seq :+= tuple true } }元素进行深度克隆（以确保它复制元素子元素）：

.footer-menu

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

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

3）将副本附加到 copy.setAttribute('class', 'main-menu'); 元素：

nav.page-nav

Answer 6

这很有效。

＆＃13;

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);

＆＃13;

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

＆＃13;

<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>

＆＃13;

复制元素并在纯Javascript中更改类

6 个答案: