이 기사에서는 jQuery 이벤트 응답 및 페이지 요소의 동적 조작과 관련된 구현 기술을 포함하여 목록에 새 요소를 동적으로 추가하는 jQuery의 간단한 방법을 주로 소개합니다. 이 글이 모든 사람에게 도움이 되기를 바랍니다.
먼저 렌더링을 살펴보겠습니다.
전체 구현 코드는 다음과 같습니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>www.jb51.net jQuery列表添加新元素</title>
<script src="jquery-1.7.2.min.js"></script>
</head>
<body>
<h3>li列表：</h3>
<ol>
<li>jb51</li>
<li>php</li>
<li>javascript</li>
<li>HTML5</li>
</ol>
<input type="text" id="text">
<input type="button" id="btn" value="添加">
<script type="text/javascript">
$(function () {
$('#btn').click(function () {
$('ol').append('<li>'+$('#text').val()+'</li>');
});
});
</script>
</body>
</html>관련 권장 사항:
요소를 삭제하고 배열 splice()에 새 요소를 추가하는 JavaScript 메서드
위 내용은 목록에 새 요소를 동적으로 추가하는 jQuery 간단한 구현의 자세한 예의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
