Добавить массив в неупорядоченный список - PullRequest
Новая
       8

Добавить массив в неупорядоченный список

3 голосов
/ 26 августа 2010

Что я пытаюсь сделать с помощью этого кода - вывести массив alphabet в виде последовательности элементов списка в существующий неупорядоченный список в фактической разметке.У меня есть массив в элементах списка, но я не могу понять, как сказать ему добавить себя в существующий неупорядоченный список <ul id="itemList"></ul>.

var itemsExist = true;
var indexNum = 0;
var unorderedList = document.getElementById('itemList');
var alphabet= new Array("A","B","C","D","E","F","G","H","I","J","K","L","M","N","O","P","Q","R","S","T","U","V","W","X","Y","Z");

function write_letters(){

    for (i = 0; i < alphabet.length; i++ ) {
        document.write('<li>'  + alphabet[indexNum++] + '</li>');
    }

}

if (itemsExist){
    write_letters();
} else {
    document.write("error!");
}

Ответы [ 3 ]

8 голосов
/ 26 августа 2010

Не используйте document.write, чтобы сделать это.Вы должны действовать следующим образом: 

function write_letters(){
    var letters = "";

    for (var i = 0; i < alphabet.length; i++ ) {
        //Also I don't understand the purpose of the indexNum variable.
        //letters += "<li>"  + alphabet[indexNum++] + "</li>";
        letters += "<li>"  + alphabet[i] + "</li>";
    }

    document.getElementById("itemList").innerHTML = letters;
}

Более правильным способом является использование DOM (если вы хотите полностью контролировать происходящее): 

function write_letters(){
    var items = document.getElementById("itemList");

    for (var i = 0; i < alphabet.length; i++ ) {
        var item = document.createElement("li");
        item.innerHTML = alphabet[i];
        items.appendChild(item);
    }

}
2 голосов
/ 26 августа 2010

Постарайтесь максимально уменьшить действия на DOM. Каждый appendChild в unorderedList заставляет браузер повторно отображать всю страницу. Используйте documentFragement для такого рода действий. 

var frag = document.createDocumentFragment();
for (var i = alphabet.length; i--; ) {
   var li = document.createElement("li");
   li.appendChild(document.createTextNode(alphabet[indexNum++]));
   frag.appendChild(li);
}
unorderedList.appendChild(frag);

Таким образом, будет только одно действие DOM, которое вызывает полную перерисовку вместо alphabet.length перерисовки

2 голосов
/ 26 августа 2010

Вы можете использовать комбинацию createElement () и appendChild () для добавления новых элементов HTML в другой элемент HTML.Код ниже должен работать для вас: 

<html>

<head>
<title>Script Test</title>
</head>

<body>
    <ul id="itemList"></ul>
</body>

<script>
    var itemsExist = true;
    var indexNum = 0;
    var unorderedList = document.getElementById('itemList');
    var alphabet= new Array("A","B","C","D","E","F","G","H","I","J","K","L","M","N","O","P","Q","R","S","T","U","V","W","X","Y","Z");
    var myElement;

    function write_letters(){

        for (i = 0; i < alphabet.length; i++ ) {
            // Create the <LI> element
            myElement = document.createElement("LI");
            // Add the letter between the <LI> tags
            myElement.innerHTML = alphabet[indexNum++];
            // Append the <LI> to the bottom of the <UL> element
            unorderedList.appendChild(myElement);
        }
    }

    if (itemsExist){
        write_letters();
    } else {
        document.write("error!");
    }
</script>

</html>

Обратите внимание, как скрипт существует под тегом body.Это важно, если вы хотите, чтобы ваш скрипт работал так, как вы его написали.В противном случае document.getElementById ('itemList') не найдет идентификатор 'itemList'.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...