Как создать элементы html динамически?

У меня есть массивКак создать элементы html динамически?

var elms = ["When?", "Why", "Where", ......];

Мне нужно создать следующие элементы

<html .. whatever> 

<div id="q1"> When? </div> 
<input type="text" id="a1"></input> 

<div id="q2"> Why? </div> 
<input type="text" id="a2"></input> 

<div id="q3"> Where? </div> 
<input type="text" id="a3"></input> 

........ 
</html>

Как я могу это сделать?

PS: Моя первоначальная страница имеет только этот массив var elms и ничего больше. Мне нужно создать все эти подразделения и материалы. Я попробовал jquery, но перепутался с одиночными и двойными кавычками. , поэтому я сдался.

источник

2014-09-12 Buras

вы помечено этот вопрос как JQuery, вы на самом деле пошли на сайт Jquery и читать через Примеры? Потому что это очень простой «использование jquery», и на самом деле не то, о чем вы должны спрашивать в Stackoverflow. Сначала попробуйте выяснить самостоятельно, затем напишите код, затем, если этот код не работает, мы здесь, чтобы помочь вам понять, почему (после того, как вы впервые попытались выяснить это сами) –

Да, я пробовал. Но я перепутал, и это не сработало – Buras

, тогда вы не пробовали достаточно вещей и/или не читали, тратят достаточно времени на чтение многих примеров, которые сайт jquery предлагает для вас. –

var el; 
var idName; 
for(var i = 0; i < elms.length; i++){ 
    idName = "q" + i; 
    el = document.getElementById(idName); 
    el.innerHTML = elms[i]; 
}

Начните Див идентификаторы с индексом 0 т.е. id="q0" сделать индексирование легко

Вы также можете сделать это с помощью JQuery:

var el; 
var idName; 
for(var i = 0; i < elms.length; i++){ 
    idName = "#q" + i; 
    $(idName).html(elms[i]); 
    // items in the html(..) can be done only in 
    // newer versions of jquery (I think) correct me if im wrong 
}

Если они уже не существует :

var id; 
for(var i = 0; i < elms.length; i++){ 
    id = "q" + i; 
    $("#containerDiv").append(
    "<div id="+id+">"+elms[i]+"</div><input type=\"text\" id=\"a2\"></input>" 
    ); 
}

источник

2014-09-12 01:32:44 Jay

Отклонитесь. Но этот метод *** заполняет *** уже существующие элементы 'q1',' q2' .. Мне, с другой стороны, нужно их создавать. Их нет с начала – Buras

@Buras добавил его на дно – Jay

Working jsFiddle Demo

HTML:

<div id="result"></div> 
<input type="button" id="mybutt" value="Go" />

JQuery:

var nextbit, cnt=0; 
var elms = ["When?", "Why", "Where", "How"]; 

$('#mybutt').click(function(){ 
    $(this).hide(); //Hide the button 
    elms.forEach(function(item){ 
     cnt++; 
     nextbit = '<div id="q"'+cnt+'>' +item+ '</div>'; 
     nextbit +='<input type="text" id="a"'+cnt+'></input>'; 
     $('#result').append(nextbit); 
    }); 
});

источник

2014-09-12 01:45:18 gibberish

Как создать элементы html динамически?

ответ

Смежные вопросы