Onclick düğmesiyle Javascript'te giriş alanları ekleme

Question

Her zaman jquery veya diğer javascript çerçevelerini kullanıyorum ama şu an kullanmak için bir çerçevem ​​yok, böylece mümkünse bunu nasıl yapabildiğimi düz javascript'te görüp görmeyeceğini görmek istedim. Temelde

i daha düğmesi i temelde biriyle yukarıdaki gibi bir bütün yapısı oluşturma fazla genişlik ve uzunluk alanları eklemek gerekir tıklandığında eklerken biridir gerekenler bu

<input type="button" id="more_fields" onclick="add_fields();" value="Add More" /> 

<div id="room_fileds"> 
    <div class='label'>Room 1:</div> 
    <div class="content"> 
     <span>Width: <input type="text" style="width:48px;" name="width[]" value="" /><small>(ft)</small> X </span> 
     <span>Length: <input type="text" style="width:48px;" namae="length[]" value="" /><small>(ft)</small</span> 
    </div> 
</div> 

gibi bir div var Tüm div'ler veya mevcut alanların altındaki alanlarla yeni bir span etiketi eklemek.

jquery veya prototype framework ile nasıl yapılacağını biliyorum ama unfortunatley Bunun için herhangi bir çerçeveyi kullanamıyorum. Bunun nasıl yapılacağı hakkında bir fikri var mı? Bunun için kod IV yayınladım ama nerede yeneceğimi bile bilmiyorum.

Answer 1

İçerik eklemek için innerHTML özelliğini kullanabilirsiniz. senin span elemanlarını çevreleyen id="wrapper"div ekle ve sonra yapabileceğiniz size id gerekmez ve div almak için diğer DOM yöntemlerini kullanabilirsiniz ama id daha kolay kullanarak bulabilirsiniz Tabii

var dummy = '<span>Label: <input type="text"><small>(ft)</small></span>\r\n'; 
document.getElementById('wrapper').innerHTML += dummy;  

ve temizleyici. İşte hızlı bir fiddle

Ayrıca, css kodunuzu satır içine almamanız gerektiğini, javascript çağrılarınızı doğrudan DOM öğelerinin içine eklememeniz gerektiğini unutmayın. DOM, Javascript ve CSS'yi ayırmak hayatınızı kolaylaştırır.

Answer 2

aynen böyle innerHTML kullanın:

btw id="content" için div class="content" değişti İsterseniz yeni kimlik ekleyebilir.

function add_fields() { 
    var d = document.getElementById("content"); 

    d.innerHTML += "<br /><span>Width: <input type='text'style='width:48px;'value='' /><small>(ft)</small></span> X <span>Length: <input type='text' style='width:48px' value='' /><small>(ft)</small</span>"; 
} 

DEMO:http://jsbin.com/oxokiq/5/edit

Answer 3

yeni bir oda oluşturmak gerek yok ?.

var room = 1; 
function add_fields() { 
    room++; 
    var objTo = document.getElementById('room_fileds') 
    var divtest = document.createElement("div"); 
    divtest.innerHTML = '<div class="label">Room ' + room +':</div><div class="content"><span>Width: <input type="text" style="width:48px;" name="width[]" value="" /><small>(ft)</small> X</span><span>Length: <input type="text" style="width:48px;" namae="length[]" value="" /><small>(ft)</small></span></div>'; 

    objTo.appendChild(divtest) 
} 

Gösteri: http://jsfiddle.net/nj4N4/7/