HTML 태그 문자열을 JavaScript 변수에 할당하십시오. 속성 값의 탈출 된 이중 따옴표 외에도 문자열은 여전히 매우 길고 어느 시점에서 약간 복잡해 보입니다. JS와 동적으로 요소를 추가하면 복잡한 문자열이 없으며 코드는 더 읽기 쉽고 이해하기 쉽습니다.
웹 페이지는 레이어별로 HTML 태그 레이어로 구성되며 JS는 Div, Li 및 IMG와 같은 태그 레이어를 동적으로 추가 할 수 있습니다. 실제로 HTML 태그가 무엇이든 JS의 동적 생성 방법은 유사합니다. 그런 다음 DIV를 동적으로 추가하여 시작하십시오.
1. JS에서 동적으로 요소를 추가하십시오
<div id = "parent"> </div> 함수 addElementDiv (obj) {var parent = document.getElementById (obj); // div var div = document.createElement ( "div") 추가; // id div.setattribute ( "id", "newdiv")와 같은 div 속성을 설정합니다. div.innerhtml = "js dynamically add div"; 부모. AppendChild (div); }전화 : addElementDiv ( "부모");
2. Li를 JS에 동적으로 추가하십시오
<ul id = "parentul"> <li> 원래 li </li> </ul> 함수 addElementli (obj) {var ul = document.getElementById (obj); // li var li = document.createElement ( "li") 추가; // id li.setAttribute ( "id", "newli")와 같은 li 속성을 설정합니다. li.innerhtml = "JS 동적으로 Li"; Ul. AppendChild (Li); }호출 : addElementli ( "parentul");
3. JS에서 요소 IMG를 동적으로 추가하십시오
<ul id = "parentul"> </ul> 함수 addlementimg (obj) {var ul = document.getElementById (obj); // li var li = document.createElement ( "li") 추가; // img var var img = document.createElement ( "IMG"); // id img.setattribute ( "id", "newimg")와 같은 IMG 속성을 설정합니다. // IMG 이미지 주소를 설정합니다. img.src = "/images/prod.jpg"; Li. AppendChild (IMG); Ul. AppendChild (Li); }호출 : addElementImg ( "parentul");
JS에 대한 위의 기사는 요소 (Div, Li, IMG 등)를 동적으로 추가하고 속성을 설정하는 것은 내가 공유하는 모든 컨텐츠입니다. 나는 당신이 당신에게 참조를 줄 수 있기를 바랍니다. 그리고 당신이 wulin.com을 더 지원할 수 있기를 바랍니다.