Question

将新元素附加到现有元素

2015-07-10

35

javascript append

我想将一个或多个“li”“a”元素附加到当前列表（仅用于练习），并且我已成功将 li 与文本附加，但我希望它像其他 li 项目一样成为链接。因此出现了 hello，但它不是链接。

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

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

Answer 2

使用InnerHTML可以为您节省很多不必要的DOM操纵/创建：

756223349

Rick Hitchcock

2015-07-10