gpt4 book ai didi

javascript - 在 javascript 中创建 ul 和 li 元素。

转载 作者:可可西里 更新时间:2023-11-01 01:38:50 25 4
gpt4 key购买 nike

我正在尝试使用 javascript 在我的代码中创建 ul 和 li 元素。我有以下内容:

var test=document.createElement('section');
test.setAttribute('id','test');

var ul=document.createElement('ul');


document.body.appendChild(test);
test.appendChild(ul);

for (var i=0; i<array.length; i++){

var li=document.createElement('li');

ul.appendChild(li);
li.innerHTML=li.innerHTML + array[i];

}

我的数组是使用来自 php 的 json_encode 解析的

array[0]='aaa';
array[1]='bbb';
array[2]='ccc';

CSS

section { 

display: block;
width: 200px;
margin: 50px auto;
border: 3px solid red;

}

一切正常,除了列表样式点在我的部分标记之外。

它在 Chrome 和 IE 中显示如下,但 firefox 工作正常。

 -------------
*| aaa |
*| bbb |
*| ccc |
-------------

我希望我的点在我的部分标签内。有人知道吗?非常感谢。

最佳答案

这是我的工作代码:

<!DOCTYPE html>
<html>
<head>
<style>
ul#proList{list-style-position: inside}
li.item{list-style:none; padding:5px;}
</style>
</head>
<body>
<div id="renderList"></div>
</body>
<script>
(function(){
var ul = document.createElement('ul');
ul.setAttribute('id','proList');

productList = ['Electronics Watch','House wear Items','Kids wear','Women Fashion'];

document.getElementById('renderList').appendChild(ul);
productList.forEach(renderProductList);

function renderProductList(element, index, arr) {
var li = document.createElement('li');
li.setAttribute('class','item');

ul.appendChild(li);

li.innerHTML=li.innerHTML + element;
}
})();
</script>
</html>

工作 jsfiddle 示例 here

关于javascript - 在 javascript 中创建 ul 和 li 元素。,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11351135/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com