페이지가로드 될 때 새 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');
- ID 별
- 관계 (텍스트 노드 포함)
- 관계 (HTML 요소 만 해당)
이것은 DOM 조작의 기초를 다룹니다. 새로 생성 된 노드가 문서 내에서 표시 되려면 본문 또는 본문 포함 노드에 요소를 추가해야합니다.
답변
JQuery 를 사용해 보셨습니까 ? 바닐라 자바 스크립트는 어려울 수 있습니다. 이것을 사용해보십시오 :
$('.container-element').add('<div>Insert Div Content</div>');
.container-element“container-element”클래스 (아마도 div를 삽입하려는 부모 요소)로 요소를 표시하는 JQuery 선택기입니다. 그런 다음 add()함수는 HTML을 컨테이너 요소에 삽입합니다.
