Question

我正在创建一个导航栏，我想要一个if语句，当为true时，我的<a>标签将被<li>包装并附加到我的<ul>上以加入其他<li>标签，其行为方式相同。我只能将<a>附加到<ul>上，但是当我尝试在其周围包裹<li>标记时，它出现了错误。提前致谢。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Foo</title>
    <script src="index.js"></script>
    <link rel="stylesheet" 
href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" 
integrity="sha384- 
50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" 
crossorigin="anonymous">
    <link rel="stylesheet" href="index.css">
</head>
<body>
    <header>
        <nav id="navbar">
            <a class="insta-link" target="_blank" 
href="https://www.instagram.com/foo"><i class="fab fa-instagram"></i>foo</a>
            <ul class="nav-items">
                <li class="navbar-item"><a href="#">Home</a></li>
                <li class="navbar-item"><a href="#">Blog</a></li>
                <li class="navbar-item"><a href="#">Stories</a></li>
                <li class="navbar-item"><a href="#">Get Involved</a></li>
            </ul>
        </nav>
    </header>

</body>

Answer 1

您可以使用ul元素的innerHTML这样添加有条件的li和a。我正在使用一个li，但是您显然可以添加任意多...

javascript：

if($(window).width <= [insert desired width to append the a tag here]) {
    document.getElementById("list").innerHTML += `
        <li><a class="insta-link" href="www.somesite.com">true condition met</a></li>
    `;
}
else {
    document.getElementById("list").innerHTML = `
        <li class="navbar-item"><a href="#">Home</a></li>
        <li class="navbar-item"><a href="#">Blog</a></li>
        <li class="navbar-item"><a href="#">Stories</a></li>
        <li class="navbar-item"><a href="#">Get Involved</a></li>
    `;
}

html：

 <ul id="list"></ul>

Answer 2

这是使用纯JavaScript的方法：

git reset --hard <origin>

类和ID的工作方式不同。 ID对于每个元素都是唯一的。因此请为Event Log类if ( true ) { list = document.createElement("li"); //creates an <li></li> tag link = document.getElementById("idOfaTag"); //fetch the <a> tag from the document and assign to link link.parentNode.removeChild(link); //this will remove the existing <a> tag list.appendChild(link); // This is how you wrap <li> around <a> document.getElementById("idOfulTag").appendChild(list); // Appends <li> containing <a>as child to your <ul> with other <li> tags }的标签分配一个ID。并在设置<a>变量时使用该ID。另外，为您的insta-link分配一个ID。当您处理唯一元素时，最好使用ID。可以将相同的类分配给同一页面中的多个元素。当您想对多个元素应用相同的更改时，可以使用link。元素 s 中带有s，因为有多个元素！

Answer 3

尝试

list.innerHTML += `<li id="instaLi"></li>`
instaLi.appendChild(insta);

<nav id="navbar">
  <a id="insta" class="insta-link" target="_blank" href="https://www.instagram.com/foo"><i class="fab fa-instagram"></i>foo</a>
  <ul id="list" class="nav-items">
    <li class="navbar-item"><a href="#">Home</a></li>
    <li class="navbar-item"><a href="#">Blog</a></li>
    <li class="navbar-item"><a href="#">Stories</a></li>
    <li class="navbar-item"><a href="#">Get Involved</a></li>
  </ul>
</nav>

如何使用JavaScript将标签附加到ul

3 个答案: