有没有办法在HTML列表的末尾添加另一个列表元素？

Question

例如，在我的test.html中：

...
<div id="content">
...
        <ul>
          <li>url0</li>
          <li>url1</li>
          ...
          <li>url32</li>
        <ul>
    ...
</div>

我想在add.php文件的列表末尾添加另一个列表元素（<li>url33</li>）。

我看到了一个类似的帖子here，用户正在替换最后一个列表元素。我的想法是，我需要以某种方式添加到列表长度然后添加到该长度位置...但我可以完全关闭我如何理解HTML列表（数组？）。

Answer 1

使用jQuery，您可以在列表末尾添加元素

  <li class="dropdown-menu">

Answer 2

纯JavaScript解决方案

var content = document.getElementById('content');
var ul = content.getElementsByTagName('ul')[0];
ul.innerHTML += '<li>url33</li>';

或

var content = document.getElementById('content');
var ul = content.getElementsByTagName('ul')[0];
var li = document.createElement('li');
li.innerHTML = 'url33';
ul.appendChild(li);

jQuery解决方案

$("#content ul").append('<li>url33</li>');

MooTools解决方案

var ul = $$('#content ul')[0];
ul.innerHTML += '<li>url33</li>';

YUI3解决方案

YUI().use('node', function (Y) {
  var ul = Y.one('#content ul');
  ul.insert('<li>url33</li>');
});

Dojo解决方案

require([
  'dojo/query',
  'dojo/dom-construct'
], function (query, domConstruct) {
  var content = query('#content ul')[0];
  domConstruct.place('<li>url33</li>', content);
});

ReactJS解决方案

<script type="text/jsx">
    /** @jsx React.DOM */
    var content = document.getElementById('content');
    var ul = content.getElementsByTagName('ul')[0];
    React.render(
        <li>url33</l1>,
        ul
    );
</script>

或

<script type="text/jsx">
    /** @jsx React.DOM */
    var content = document.getElementById('content');
    var ul = content.getElementsByTagName('ul')[0];
    React.render(
        React.DOM.li(null, 'url33'),
        ul
    );
</script>