Question

var myArray = ['hi' , 'hi there' , 'hi there again' , 'sup'];

var myList  = document.getElementById('list');    // i have an li with an id of list

      function hello(){
         for (var i = 0; i < myArray.length; i++) {
           document.write(myArray[i] + '<br/>')

         }

      };

   hello();

我是javascript的新手:)

Answer 1

您不应该使用document.write()，因为这仅在页面加载时有效，并且被视为不良做法。您应该在列表的+=属性上使用.innerHTML。

a += b运算符是a = a+b;

的缩写形式

它将b附加到a的当前值，并且您在循环中运行它，因此每次都会添加。

HTML

<ul id='content'></ul>

的Javascript

var myArray = ['hi' , 'hi there' , 'hi there again' , 'sup'];
var content = document.getElementById('content');
for (var i = 0; i < myArray.length; i++) {
    ul.innerHTML += ('<li>'+myArray[i] + '</li>')
}

代码演示：http://jsfiddle.net/m60ur50z/2/

Answer 2

在这里，试试这个：

var myArray = ['hi' , 'hi there' , 'hi there again' , 'sup'];

var myList  = document.getElementById('list').parentNode;    
function hello(){
   for (var i = 0; i < myArray.length; i++) 
       myList.innerHTML+='<li class="list">'+myArray[i]+'</li>';
}

hello();

这会产生这个：

<ul>
  <li id='list'></li>  <!-- As mentioned in the question -->
  <li class='list'>hi</li>
  <li class='list'>hi there</li>
  ...
</ul>

详细了解.parentNode和.innerHTML。

Answer 3

将列表的innerHTML属性设置为＆＃39; li＆＃39;的字符串可能最容易。包含内容的标签，如下所示：

＆＃13;

var html = '';
for (var i = 0; i < myArray.length; i++) {
  html += '<li>' + myArray[i] + '</li>'
}
document.getElementById('list').innerHTML = html;

＆＃13;

对于它的价值，做这样的DOM操作任务通常是用库完成的，例如： jQuery，只是因为它使得选择和添加HTML文档变得更加容易。但如果你想在香草JS中做到这一点，上面的工作。使用DOM API及其＆＃34; appendChild＆＃34;方法等是痛苦的，通常是要避免的。

Answer 4

使用纯DOM方法

var myArray = ['hi', 'hi there', 'hi there again', 'sup'];

var myList = document.getElementById('list'); // i have an li with an id of list

function hello() {
    for (var i = 0; i < myArray.length; i++) {
        var listItem = document.createElement("li");
        listItem.appendChild(document.createTextNode(myArray[i]));
        myList.appendChild(listItem);
    }
};
hello();

http://jsfiddle.net/dgautsch/43yf7sb4/

如何将for循环的值添加到<li>并设置样式？

4 个答案:

HTML

的Javascript