Когато ми се наложи да пиша javascript, обикновено гледам да свърша възможно най-бързо и да се върна на приятелска PHP-територия. Затова когато трябваше да напиша динамично добавяне на input елементи, набързо написах първото, което ми хрумна:
-
<div id="band_container'>
-
<div class="label">Favourite band(s):</div>
-
<div class="text-box"><input type="text" name="bands[]" /></div>
-
<div class="add-button"><a onclick="add_band_input();">add another</a></div>
-
<div class="clear"></div>
-
</div>
-
и съответно в js-файла:
-
function add_band_input() {
-
document.getElementById("band_container").innerHTML += '<div class="label"> </div><div class="text-box"><input type="text" name="bands[]" /></div><div class="clear"></div>';
-
}
Проработи и забравих за него. Няколко дни по-късно забелязах, че ако въведа нещо в input полето и след това натисна линка add another, въведеното от мен изчезва. Това беше проблем. След известно проучване – главно ровене из stackoverflow.com – намерих решение:
-
function add_band_input() {
-
var parentDiv = document.getElementById("band_container");
-
var newDiv1 = document.createElement("div");
-
var newDiv2 = document.createElement("div");
-
var newDiv3 = document.createElement("div");
-
newDiv1.innerHTML = '<div class="label"> </div>';
-
parentDiv.appendChild(newDiv1);
-
newDiv2.innerHTML = '<div class="text-box"><input type="text" name="bands[]" /></div>';
-
parentDiv.appendChild(newDiv2);
-
newDiv3.innerHTML = '<div class="clear"></div>';
-
parentDiv.appendChild(newDiv3);
-
}
Оказа се, че като използвам DOM, кодът е не само по-красив, но и по-стабилен. Това някак ме накара да почувствам непозната до този момент близост с javascript.
