집 > 기사 > 백엔드 개발 > 목록에 새 요소를 동적으로 추가하는 jQuery 간단한 구현의 자세한 예

목록에 새 요소를 동적으로 추가하는 jQuery 간단한 구현의 자세한 예

小云云원래의: 2017-12-26 09:13:061631검색

이 기사에서는 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 () { 
    $(&#39;#btn&#39;).click(function () { 
      $(&#39;ol&#39;).append(&#39;<li>&#39;+$(&#39;#text&#39;).val()+&#39;</li>&#39;); 
    }); 
}); 
</script> 
</body> 
</html>

목록에 새 요소를 동적으로 추가하는 jQuery 간단한 구현의 자세한 예

관련 기사