2012-04-25 1 views
1

Im пытается добавить массив на веб-страницу. Я попробовал несколько разных фрагментов кода ниже, но никто из них не работает. Я хотел бы выход быть похож на список, как:Добавление массива javaScript в HTML-страницу?

text1

TEXT2

text3 ...

код, который я использовал до сих пор:

var i; 
var test = new Array(); 
test[0] = "text1"; 
test[1] = "text2"; 
test[2] = "text3"; 

// first attempt 
$('#here').html(test.join(' ')); 

// second attempt 
$(document).ready(function() { 
    var testList=""; 
    for (i=0;i<test.length; i++) { 
     testList+= test[i] + '<br />'; 
    } 
    $('#here').html('testList'); 
    songList=""; 
}); 

Я довольно новичок в javaScript, поэтому не уверен, что я только что совершил небольшую ошибку, или если я делаю это неправильно. Кроме того, выше приведена копия всего кода в файле javaScript, а некоторые места в Интернете говорят, что мне нужно что-то импортировать? Я не уверен!
Благодаря

+0

У вас есть сообщения об ошибках в консоли JavaScript? Вы включаете библиотеку jQuery? –

+2

Не связано с вопросом, но это неприятный способ создания массива. Просто используйте 'var test = [" text1 "," text2 "," text3 "];' –

ответ

0

Что у вас есть работы, если вы удалите одиночные кавычки из testList. Однако, если вы хотите получить реальный неупорядоченный список, вы можете это сделать. (here's a jsFiddle))

var test = new Array(); 
test[0] = "text1"; 
test[1] = "text2"; 
test[2] = "text3"; 

// first attempt 
$('#here').html(test.join(' ')); 

// second attempt 
$(document).ready(function() { 
    var testList=$("<ul></ul>"); 
    for (var i=0;i<test.length; i++) { 
     $(testList).append($("<li></li>").text(test[i])); 
    } 
    $('#here').html(testList); 
    songList=""; 
}); ​ 
6

Try без кавычек:

$('#here').html(testList); 

-или-

$('#here').html(test.join('<br />')); 

Другой подход:

var html = '';         // string 
$.each(test,function(i,val){      // loop through array 
    var newDiv = $('<div/>').html(val);   // build a div around each value 
    html += $('<div>').append(newDiv.clone()).remove().html(); 
     // get the html by 
     // 1. cloning the object 
     // 2. wrapping it 
     // 3. getting that html 
     // 4. then deleting the wrap 
     // courtesy of (http://jquery-howto.blogspot.com/2009/02/how-to-get-full-html-string-including.html) 
}); 

$('#here').html(html); 

Там может быть мо re в последнем, но в конечном итоге это будет более чистым, если вы хотите добавить идентификаторы, классы или другие атрибуты. Просто вставьте его в функцию и внесите изменения в jQuery.

4

Попробуйте изменить линию

$('#here').html('testList') 

в

$('#here').html(testList) 
+1

duplicate answer: http://stackoverflow.com/a/10316269/782746 – binarious

+0

vol7ron был немного быстрее;) – binarious

+0

@Scott vol7ron был первым в. –

0

Эта линия:

$('#here').html('testList'); 

не должны иметь одиночные кавычки вокруг testList - вы хотите использовать содержимое переменная, а не строковый литерал «testList».

0

Не передать переменную в виде строки: $('#here').html('testList'); Передай без кавычек: $('#here').html(testList);

0

Вот простейший вариант:

$(document).ready(function() { 
    var test = ["text1", "text2", "text3"]; 
    $('#here').html(test.join("<br>")); 
});