서문 :
요소를 만드는 방법에는 두 가지가 있습니다
1) 문자열 형태로 만들어야하는 요소를 스플 라이스; 부모 요소를 찾고 부모 요소의 내부를 직접 할당하십시오.
2) 문서 및 요소 개체가 제공 한 일부 기능을 사용하여 요소의 동적 생성을 달성합니다 (요소 만들기 => 부모 요소 찾기 => 지정된 위치에 요소 삽입).
1. 문자열 스 플라이 싱 양식
더 잘 이해하려면 응용 프로그램 시나리오를 설정하십시오.
숫자 세트를 무작위로 생성 하고이 데이터 세트를 막대 차트로 렌더링 한 다음 아래 그림과 같이 div [id = "컨테이너"]에 배치합니다.
<div id = "컨테이너"> </div> <cript> window.onload = function () {var str = ''; for (var i = 0; i <30; i ++) {var r = parseint (math.random ()*100); // 무작위 생성 숫자 str+= '<div>'+r+'</div>'; // split str} document.getElementById ( 'container'). innerHtml = str; } </스크립트>2. 문서 및 요소 개체와 함께 제공되는 일부 기능 사용
아래 그림과 같이 응용 프로그램 시나리오도 설정
입력의 정보를 가져 와서 오른쪽의 버튼에 따라 아래의 빨간색 사각형의 왼쪽 또는 오른쪽에 삽입하십시오.
솔루션은 세 단계로 나뉩니다 .
구현 코드 :
<div id = "div-input"> <input type = "text"id = "txt_input"value = "4"/> <입력 유형 = "Id ="id = "leftinsert"value = "LeftInsert"/> <입력 유형 = "id ="rightinsert "value ="RightInsert "/> </div> <div id ="컨테이너 "> <span> 1 </span> <Span> 3 </span> </div> <cript> window.onload = function () {var inputValue = document.getElementById ( 'txt_input'). 값; document.getElementById ( 'leftInsert'). OnClick = function () {// 왼쪽의 var 스팬 = document.createElement ( 'span'); // 1. 요소 span.innerhtml = inputValue; var 컨테이너 = document.getElementById ( '컨테이너'); // 2. 부모 요소 컨테이너를 찾으십시오. // 왼쪽에 삽입} document.getElementById ( 'rightInsert'). onclick = function () {// 오른쪽의 var span = document.createElement ( 'span'); // 1. 요소 span.innerhtml = inputValue; var 컨테이너 = document.getElementById ( '컨테이너'); // 2. 부모 요소 컨테이너를 찾으십시오. // 3. 끝에 요소를 추가하십시오}} </script>JS 동적 생성 요소 [두 가지 방법]에 대한 위의 간단한 분석은 내가 공유하는 모든 내용입니다. 나는 당신이 당신에게 참조를 줄 수 있기를 바랍니다. 그리고 당신이 wulin.com을 더 지원할 수 있기를 바랍니다.