Question

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

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

filler.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()文档是我仅用于测试目的的内容。一旦我弄清楚如何添加更多<li>使用AJAX进入<ul>，我将使用PHP页面来生成<li> s，其中包含来自MySQL数据库的信息。）

Answer 1

这将为您提供输出：

var newItems =＆＃34;

新项目6

新项目7

新项目8

新项目9

新项目10

＆＃34;;

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

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

AJAX：将<li>添加到现有的

1 个答案: