이 문서에서는 HTML 요소를 동적으로 생성하고 요소에 속성을 추가하는 방법(코드 첨부)을 소개합니다. 내용이 매우 좋습니다. 도움이 필요한 친구들이 모두 참고할 수 있기를 바랍니다.
HTML 요소를 동적으로 생성하는 세 가지 방법이 있습니다.
첫 번째 방법: document.createElement()가 요소를 생성한 다음,appendChild() 메서드를 사용하여 지정된 노드에 요소를 추가합니다
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div id="main"> <span id="login"></span> </div> </body> <script> var link = document.createElement('a'); link.setAttribute('href','#'); link.setAttribute('id','login'); link.style.color = 'green'; link.innerHTML = '登录'; var main = document.getElementById('main'); main.appendChild(link); </script> </html>
두 번째: innerHTML을 사용하여 지정된 노드에 요소를 직접 추가합니다
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div id="main"> <span id="login"></span> </div> </body> <script> var link = document.createElement('a'); //使用innerHTML将元素直接添加到指定节点 main.innerHTML = "<a href='#' id='login' style='color: red;'>登录</a>"; </script> </html>
세 번째: jQuery로 노드 만들기
jQuery에서 DOM 개체를 만들고 jQuery의 팩토리 함수를 사용합니다. $()를 완료하려면 형식은 다음과 같습니다.
$(html), $(html)은 수신 HTML 태그 문자열을 기반으로 DOM 객체를 생성하고 DOM 객체를 jQuery 객체로 래핑한 후 첫 페이지.
생성된 노드를 jQuery의 텍스트에 삽입하고, 추가() 및 기타 방법을 사용합니다. jQuery에서 노드를 삽입하는 방법은 다음과 같습니다.
1.append(): 일치하는 각 요소에 콘텐츠를 추가합니다
2.appendTo (): 기존의 $(A).append(B) 메소드를 반전하여 일치하는 모든 요소를 지정된 요소에 추가합니다. B를 A에 추가하는 대신 A가 B
3.prepend에 추가됩니다. (): 각 요소 앞에 콘텐츠를 추가합니다. 일치하는 요소
4.prependTo(): 일치하는 모든 콘텐츠를 지정된 요소 앞에 추가합니다. 이 작업은 prpend() 메서드로 반전됩니다.
5.after(): 일치하는 모든 콘텐츠를 지정된 요소 앞에 추가합니다. 일치 후 콘텐츠 삽입 요소
6.insertAfter(): 지정된 요소 뒤에 일치하는 모든 요소를 삽입하고 after() 메서드를 사용하여 반전시킵니다.
7.before(): 일치하는 각 요소 앞에 콘텐츠를 삽입합니다.
8.insertBefore(): 일치하는 각 요소를 삽입합니다. 지정된 콘텐츠 앞의 요소, before() 메서드로 반전됨
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="jquery-1.11.1.min.js"></script> <style type="text/css"> .newStyle{ color:red } </style> <script> $(function(){ var link=$('<a href="#" id="link" style="color:pink">登录</a>'); $('#main').append(link).addClass("newStyle"); }) </script> </head> <body> <div id="main"></div> </body> </html>
관련 권장 사항:
HTML에서 테이블을 사용하여 td 테두리(코드) 효과를 얻는 방법
앞 부분에 대한 자세한 설명- HTML 페이지 간에 매개변수를 전달하는 종료 방법
위 내용은 HTML 요소를 동적으로 생성하고 요소에 속성을 추가하는 방법 소개(코드 첨부)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!