Question

当我使用下面的代码时，生成的html将关闭的ul标记放在开头的ul标记后面，如下所示：<ul></ul><li>Food</li><li>Rent</li><li>Stuff</li>

如何正确连接这个，所以ul元素显示正确？

  objTransDetails.innerHTML = "<ul>"; 

  for (i = 0; i < transElements.length; i++) { 
                        objTransDetails.innerHTML += "<li>" + transElements[i].firstChild.data + "</li>";  
                    }

  objTransDetails.innerHTML += "</ul>";

Answer 1

首先，不要忘记var !!!

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

现在，我认为主要的问题是你在“innerHTML”值中构建HTML，这真的不会很好;它不仅仅是一个字符串，它就像直接进入浏览器大脑的管道。在临时变量中构建替换HTML，然后立即将其全部设置。

您看到效果的原因是，当您启动该过程并将“innerHTML”设置为除了字符串“＆lt; ul＆gt;”之外的任何内容时，浏览器必须通过添加缺少的关闭标记（有效）。当您下次访问“innerHTML”时，您得到的是“＆lt; ul＆gt;＆lt; / ul＆gt;”因为这是你最后放在那里的更正的形式。

Answer 2

尝试一次插入整个HTML块：

var contents = "<ul>";

for (var i = 0; i < transElements.length; i++) { 
    contents += "<li>" + transElements[i].firstChild.data + "</li>";  
}
contents += "</ul>";

objTransDetails.innerHTML = contents;

修改：同时@Pointy指出，请务必使用var

Answer 3

不要将innerHTML与文字HTML标记字符串一起使用。可能会发生许多不安全的事情，但这是另一个线程的主题。你正在处理对象，所以不要把它们视为字符串。

var ul = document.createElement('ul');
objTransDetails.appendChild(ul);
var li;
for (var i = 0; i < transElements.length; i++) {
 li = document.createElement('li');
 li.innerHTML = transElements[i].firstChild.data;
 ul.appendChild(li);
}

如何将javascript数组元素连接并显示为无序列表？

3 个答案: