새 div를 동적으로 만들고, 변경하고, 이동하고, JavaScript에서 가능한 모든 방법으로 수정하는 방법은 무엇입니까?

새 div를 동적으로 만들고, 변경하고, 이동하고, JavaScript에서 가능한 모든 방법으로 수정하는 방법은 무엇입니까?

---

페이지가로드 될 때 새 div를 만들고 싶습니다. 이러한 div는 JSON 파일의 외부 데이터에 따라 변경되는 정렬 된 그룹으로 표시됩니다. 100 개 이상의 div가 필요하기 때문에 for 루프를 사용하여이 작업을 수행해야합니다.

따라서 높이, 너비, 상단 / 왼쪽 등과 관련하여 생성 된 각 div를 변경할 수 있어야합니다. 그러나 document.getElementById("created_div").style.whatever아무것도하지 않으며 하나의 새 div가 나타나는 것도 볼 수 없습니다. 새 div 높이 / 너비를 500px, 배경을 "빨간색"등으로 설정했지만 새 div가 확실히 나타나지 않습니다.

내가 도대체 ​​뭘 잘못하고있는 겁니까?

---

• 창조 var div = document.createElement('div');
• 부가 document.body.appendChild(div);
• 스타일 조작
  • 포지셔닝 div.style.left = '32px'; div.style.top = '-16px';
  • 클래스 div.className = 'ui-modal';
• 가감
  • 신분증 div.id = 'test';
  • 내용 (HTML 사용) div.innerHTML = '<span class="msg">Hello world.</span>';
  • 내용 (텍스트 사용) div.textContent = 'Hello world.';
• 제거 div.parentNode.removeChild(div);
• 액세스
  • ID 별 div = document.getElementById('test');
  • 태그로 array = document.getElementsByTagName('div');
  • 클래스 별 array = document.getElementsByClassName('ui-modal');
  • CSS 선택 기별 (단일) div = document.querySelector('div #test .ui-modal');
  • CSS 선택 기별 (다중) array = document.querySelectorAll('div');
• 관계 (텍스트 노드 포함)
  • 어린이 node = div.childNodes[i];
  • 형제 node = div.nextSibling;
• 관계 (HTML 요소 만 해당)
  • 어린이 element = div.children[i];
  • 형제 element = div.nextElementSibling;

이것은 DOM 조작의 기초를 다룹니다. 새로 생성 된 노드가 문서 내에 표시 되려면 본문 또는 본문 포함 노드에 요소를 추가해야합니다.

---

JQuery 를 사용해 보셨습니까 ? 바닐라 자바 ​​스크립트는 어려울 수 있습니다. 이것을 사용해보십시오 :

$('.container-element').add('<div>Insert Div Content</div>');

.container-element"container-element"클래스 (아마도 div를 삽입하려는 부모 요소)로 요소를 표시하는 JQuery 선택기입니다. 그런 다음 add()함수는 HTML을 컨테이너 요소에 삽입합니다.

참고 URL : https://stackoverflow.com/questions/14094697/how-to-create-new-div-dynamically-change-it-move-it-modify-it-in-every-way-po