javascript - AJAX:将 添加到现有的

Question

我正在尝试添加 <li> s 到现有的<ul>使用 AJAX。这是一个非常简单的测试。

HTML:

<ul id="full_list">
    <li>Existing item 1</li>
    <li>Existing item 2</li>
    <li>Existing item 3</li>
    <li>Existing item 4</li>
    <li>Existing item 5</li>
</ul>
<button type="button" onclick="addMoreItems()"></button>

JS:

function addMoreItems () {
    var xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange = function() {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            document.getElementById("full_list").appendChild = xmlhttp.responseText;
        }
    }
    xmlhttp.open("GET", "filler.txt", true);
    xmlhttp.send();
}

填充.txt:

<li>New item 6</li>
<li>New item 7</li>
<li>New item 8</li>
<li>New item 9</li>
<li>New item 10</li>

期望的结果:

<ul id="full_list">
    <li>Existing item 1</li>
    <li>Existing item 2</li>
    <li>Existing item 3</li>
    <li>Existing item 4</li>
    <li>Existing item 5</li>
    <li>New item 6</li>
    <li>New item 7</li>
    <li>New item 8</li>
    <li>New item 9</li>
    <li>New item 10</li>
</ul>
<button type="button" onclick="addMoreItems()"></button>

我在填充 <ul> 时没有任何问题与 filler.txt的<li>如果我使用innerHTML 。我花了时间搜索这个网站和其他网站，并且看到它说与 innerHTML 不同它替换元素节点的所有内容，appendChild需要一个对象而不是字符串，因此在页面加载后无法添加到 DOM。

不幸的是，我仍然无法弄清楚如何附加带有大量 <li> 的文本字符串。 s 背对背现有的 <ul> 。想法？

( filler.txt 的第二个参数中的 xmlhttp.open() 文档仅用于测试目的。一旦我弄清楚如何使用 AJAX 将更多 <li> 附加到 <ul> 中，我'将使用 PHP 页面，该页面会使用我的 MySQL 数据库中的信息生成 <li> 。)

Answer 1

这将为您提供输出:

var 新项目 = "

新项目 6

新项目 7

新项目 8

新项目 9

新项目 10

";

        document.getElementById("full_list").innerHTML += newItems;

为了简单起见，我使用了 html 中已有的变量并添加到了 innerHTML 属性中。