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

Question

例如，在我的 test.html:

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

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

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

Answer 1

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

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

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

道场解决方案

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>

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

Is there a way to add another list element at the end of the HTML list?

php

html-lists

纯JavaScript溶液

jQuery解法

MooTools 解决方案

YUI3解决方案

道场解决方案

ReactJS 解决方案