Chcę tworzyć nowe elementy div podczas ładowania strony. Te elementy DIV będą wyświetlane jako uporządkowana grupa, która zmienia się w zależności od danych zewnętrznych z pliku JSON. Będę musiał to zrobić za pomocą pętli for, ponieważ potrzeba ponad 100 elementów div.
Muszę więc mieć możliwość zmiany każdego utworzonego elementu div pod względem wysokości, szerokości, góry / lewej i tak dalej. Jednak document.getElementById("created_div").style.whatever
nic nie robi, nie widzę nawet żadnego nowego elementu div. Ustawiłem wysokość / szerokość nowych elementów div na 500px, tło na „czerwone” i tak dalej, ale na pewno nie pojawiają się żadne nowe elementy div.
Co ja robię źle?
javascript
dom
Erik Nelson
źródło
źródło
Odpowiedzi:
var div = document.createElement('div');
document.body.appendChild(div);
div.style.left = '32px';
div.style.top = '-16px';
div.className = 'ui-modal';
div.id = 'test';
div.innerHTML = '<span class="msg">Hello world.</span>';
div.textContent = 'Hello world.';
div.parentNode.removeChild(div);
div = document.getElementById('test');
array = document.getElementsByTagName('div');
array = document.getElementsByClassName('ui-modal');
div = document.querySelector('div #test .ui-modal');
array = document.querySelectorAll('div');
node = div.childNodes[i];
node = div.nextSibling;
element = div.children[i];
element = div.nextElementSibling;
To obejmuje podstawy manipulacji DOM. Pamiętaj, że dodanie elementu do treści lub węzła zawartego w treści jest wymagane, aby nowo utworzony węzeł był widoczny w dokumencie.
źródło
Czy próbowałeś już JQuery ? Waniliowy javascript może być trudny. Spróbuj użyć tego:
$('.container-element').add('<div>Insert Div Content</div>');
.container-element
jest selektorem JQuery, który oznacza element klasą „element-kontenera” (prawdopodobnie element nadrzędny, do którego chcesz wstawić swoje elementy div). Następnieadd()
funkcja wstawia HTML do elementu kontenera.źródło