Объединить input и select в динамической форме
 

Доброго дня, уважаемое сообщество :)

Есть небольшой скрипт, который динамически формирует список для select, и формирует поле input, но вот как динамически вывести их вместе ума не приложу, по отдельности все выводится отлично.

Код:

var lyricslist = JSON.parse( '<?php echo $lyricsjson ?>' );
var tracknum = 1;

function addInput(){
    
    var newDiv=document.createElement('div');
    var newTrack = document.createElement('input');
    
    var trackNumber = 'track'+tracknum;
	
    newTrack.setAttribute('id',trackNumber);
    newTrack.setAttribute('name',trackNumber);
    newTrack.setAttribute('type','text');
    newTrack.setAttribute('size','60');

    var selectHTML = "";
    
    selectHTML="<select name='ltrack"+ tracknum +"'>";

    for(var key in lyricslist) {
	selectHTML+= "<option value='"+lyricslist[key].id+"'>"+lyricslist[key].title+"</option>";
}
        selectHTML += "</select>";
    
	newDiv.innerHTML = selectHTML;

	document.getElementById('dynamicInput').appendChild(newDiv);
	tracknum++;
}

Форма:

<form id="tracks" name="tracks" class="new" method="post" action="testpost.php">
    <div id="dynamicInput">
-- вот сюда динамически вставляется элемент
    </div>
    <input type="button" value="Add" onclick="addInput('dynamicInput');" />
</form>
    <input type="button" value="Save" onclick="tracks.submit()"/>

в вышеприведенном коде вставляется select, не подскажете как корректно добавить перед ним еще и input ?

Spirtt0,
строка 26

document.getElementById('dynamicInput').appendChild(newTrack);

Спасибо, почти то что надо ! но получается что select добавляется в newDiv , а newTrack в div dynamicInput из-за чего они не в одну строку, вопрос как корректно положить их рядом, чтобы и input и select были в newDiv ?

Spirtt0,

function addInput(){

    var newDiv=document.createElement('div');
    var newTrack = document.createElement('input');

    var trackNumber = 'track'+tracknum;

    newTrack.setAttribute('id',trackNumber);
    newTrack.setAttribute('name',trackNumber);
    newTrack.setAttribute('type','text');
    newTrack.setAttribute('size','60');

    var select = document.createElement('select');
    select.setAttribute('name','ltrack'+ tracknum);
    for(var key in lyricslist) {
    select.options[select.options.length] = new Option(lyricslist[key].title, lyricslist[key].id);
    }
    newDiv.appendChild(newTrack);
    newDiv.appendChild(select);
	document.getElementById('dynamicInput').appendChild(newDiv);

	tracknum++;
}

спасибо , то что надо ! :thanks:

Кстати, рекомендуется вместо

newTrack.setAttribute('id',trackNumber);
newTrack.setAttribute('name',trackNumber);
newTrack.setAttribute('type','text');
newTrack.setAttribute('size','60');

писать

newTrack.id = newTrack.name = trackNumber;
newTrack.type ='text';
newTrack.size = 60;