집 > 기사 > 웹 프론트엔드 > jQuery에서 목록에 동적으로 추가하는 방법

jQuery에서 목록에 동적으로 추가하는 방법

亚连원래의: 2018-06-15 15:31:423191검색

이 글에서는 jQuery의 이벤트 응답 및 페이지 요소의 동적 연산과 관련된 구현 기술을 포함하여 목록에 새 요소를 동적으로 추가하는 jQuery의 간단한 방법을 주로 소개합니다. 목록에 새 요소를 동적으로 추가하는 방법 새 요소를 추가하는 방법. 참고용으로 공유합니다. 세부 사항은 다음과 같습니다.

먼저 렌더링을 살펴보겠습니다.

전체 구현 코드는 다음과 같습니다.

<!DOCTYPE html>
<html lang="en">
<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에서 목록에 동적으로 추가하는 방법

관련 기사