刷新列表的内容，不要添加新的 li，而是用新的替换

有没有办法刷新列表的内容，而不是添加新的li，而是用新的替换？

目前，我正在尝试从具有一些对象的数组进行打印，其中一个属性是数组本身。因此，每次随机获得一个对象时，您也会打印它的数组。到目前为止，我正在创建列表项，其中可以打印数组项，但每次都会添加而不是新的列表项。

为了清楚起见，我只想在列表中查看当前对象属性，而不是以前的对象属性。因此，一旦选择了新对象，就会使用新内容更新列表......

有没有不同的方法？我试图用新列表更改容器div 的内部 html，但它不起作用......

这就是我正在使用的，但它只是添加到列表中而不是替换......

var ul = document.createElement('ul');
var li = document.createElement('li');
li.appendChild(document.createTextNode(quotesTags[i]));
ul.appendChild(li);
div.appendChild(ul);

谢谢阿丽娜

当然！你只是在创建元素本身(var li(，所以设置它的innerHTML，而不是附加一个子元素：

var ul = document.createElement('ul');
var li = document.createElement('li');
li.innerHTML = quotesTags[i];
ul.appendChild(li);
div.innerHTML = ul;

希望这有帮助！ :)

谢谢你的回答。我实际上也累了，但我希望每个项目都在单独的 li 上。

标签： [1， 2， 3]

所以不是

1 2 3

每次我得到一个新对象时都有

阿拉伯数字

您已经根据需要创建了ul和li。唯一的附加方法是在循环访问项目列表时创建li。所需的代码包含在以下工作示例的<script>中：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
</head>
<body>
<div id="test"></div>
<script>
    var quotesTags = ['apple', 'pear', 'orange'];
    var ul = document.createElement('ul');
    quotesTags.forEach(function(tag) {
        var li = document.createElement('li');
        li.appendChild(document.createTextNode(tag));
        ul.appendChild(li);
    });
    document.getElementById('test').appendChild(ul);
</script>
</body>
</html>

嗨，

感谢您的回答，但我想做的是：

假设我们有 html

<div id="test"></div> 
Then the array with the objects
var array = [
{
prop : 'first prop',
tags : [1, 2, 3]
},
{
prop : 'prop',
tags : [4, 0, 3]
},
{
prop : 'first prop',
tags : [5, 6, 8]
}
];

因此，

每次选择一个随机对象时，div 都会使用新标签进行更新，因此会更新新的 ul。

输出应为

打印对象打印标签的 ul

目前每次我打印随机对象时，div 都会添加 uls 而不是获得一个新的

我只是想知道是否有办法将新列表附加到div 而不是添加......我可以用不同的方式做到这一点，但只是想知道这是否可能。

相关内容

最新更新

热门标签：