将新元素附加到已经存在的元素

Question

我想将 'li' 'a' element/s 附加到当前列表（只是为了练习），我已经设法将 li 附加到文本中，但我想要它与其他 li 项目一样是 link。所以你好出现了，但它不是 link.

var newListItem = document.createElement("li");
var newListItemText = document.createTextNode("hello");

newListItem.appendChild(newListItemText);

var secondItem = document.getElementById("mainNavUl");

secondItem.insertBefore (newListItem, secondItem [0]);

HTML

<nav id="mainNav">
        <ul id="mainNavUl">
            <li><a href="#">Test</a></li>
            <li><a href="#">Test</a></li>
            <li><a href="#">Test</a></li>
            <li><a href="#">Test</a></li>
        </ul>
    </nav>

Answer 1

使用 innerHTML 可以为您节省很多不必要的DOM manipulation/creation:

var newListItem = document.createElement("li");

newListItem.innerHTML= '<a href="#">hello</a>';

var secondItem = document.getElementById("mainNavUl");

secondItem.insertBefore(newListItem, secondItem[0]);

<nav id="mainNav">
  <ul id="mainNavUl">
    <li><a href="#">Test</a>
    </li>
    <li><a href="#">Test</a>
    </li>
    <li><a href="#">Test</a>
    </li>
    <li><a href="#">Test</a>
    </li>
  </ul>
</nav>

Answer 2

添加 li 是不够的，您还应该添加 a 标签

试试这个：

var newAnchor = document.createElement("a");

newAnchor.href= '#';

newAnchor.innerText = 'Just added';

var newListItem = document.createElement("li");

newListItem.appendChild(newAnchor);

var secondItem = document.getElementById("mainNavUl");

secondItem.insertBefore(newListItem, secondItem[0]);

<nav id="mainNav">
  <ul id="mainNavUl">
    <li><a href="#">Test</a>
    </li>
    <li><a href="#">Test</a>
    </li>
    <li><a href="#">Test</a>
    </li>
    <li><a href="#">Test</a>
    </li>
  </ul>
</nav>

将新元素附加到已经存在的元素

Appending a new element to an already existing one

javascript

append