동적으로 요소(div, li, img 등)를 추가하고 js에서 속성을 설정하는 방법

javascript 변수에 html 태그 문자열을 할당합니다. 이스케이프된 큰따옴표를 사용하는 속성 값 외에도 문자열이 매우 길어서 약간 복잡해 보이는 경우도 있습니다. js를 사용하여 요소를 동적으로 추가하면 그렇게 복잡한 문자열이 없고 코드가 더 읽기 쉽고 이해하기 쉬워집니다.

웹 페이지는 html 태그의 레이어로 구성되며, js는 div, li, img와 같은 태그 레이어를 동적으로 추가할 수도 있습니다. 사실 어떤 html 태그이든지 js에서 동적으로 생성하는 방법은 동일합니다. 그러면 div를 동적으로 추가하는 것부터 시작합니다.

1.js 동적으로 div 요소 추가

<div id="parent"></div>
 
　　function addElementDiv(obj) {
　　　　var parent = document.getElementById(obj);
 
　　　　//添加 div
　　　　var div = document.createElement("div");
 
　　　　//设置 div 属性，如 id
　　　　div.setAttribute("id", "newDiv");
 
　　　　div.innerHTML = "js 动态添加div";
　　　　parent.appendChild(div);
　　}

호출: addElementDiv("parent");

2 , js는 동적으로 li 추가

<ul id="parentUl"><li>原li</li></ul>
 
　　function addElementLi(obj) {
　　　　var ul = document.getElementById(obj);
 
　　　　//添加 li
　　　　var li = document.createElement("li");
 
　　　　//设置 li 属性，如 id
　　　　li.setAttribute("id", "newli");
 
　　　　li.innerHTML = "js 动态添加li";
　　　　ul.appendChild(li);
　　}

Call: addElementLi("parentUl");

3. js는 img 요소를 동적으로 추가합니다

<ul id="parentUl"></ul>
 
　　function addElementImg(obj) {
　　　　var ul = document.getElementById(obj);
 
　　　　//添加 li
　　　　var li = document.createElement("li");
 
　　　　//添加 img
　　　　var img = document.createElement("img");
 
　　　　//设置 img 属性，如 id
　　　　img.setAttribute("id", "newImg");
 
　　　　//设置 img 图片地址
　　　　img.src = "/images/prod.jpg";
 
　　　　li.appendChild(img);
　　　　ul.appendChild(li);
　　}

Call: addElementImg("parentUl");

위 js는 요소(div, li, img 등)를 동적으로 추가합니다. 그리고 속성 설정 방법은 모두 에디터가 공유한 내용이므로 참고가 되셨으면 좋겠습니다. 또한 PHP 중국어 홈페이지도 지원해 주시길 바랍니다.

더 많은 js에 동적으로 요소(div, li, img 등)를 추가하고 속성을 설정하는 방법에 대해서는 PHP 중국어 웹사이트에서 관련 기사를 참고하세요!