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

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

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

이 글에서는 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>

위는 제가 컴파일한 것입니다. , 앞으로도 도움이 되길 바랍니다.

관련 기사:

Vue의 datepicker용 샘플 코드

로그인하지 않고 웹사이트에서 콘텐츠를 복사할 수 없는 문제를 해결하는 방법

Vue의 datepicker 플러그인은 datepicker의 값을 모니터링할 수 없습니다. 입력 상자

React의 구성 요소 간 추상화에 대한 자세한 설명

React Native의 NavigatorIOS 구성 요소(자세한 튜토리얼 설명)

ejsExcel 템플릿 사용 방법에 대해

위 내용은 jQuery에서 목록에 동적으로 추가하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사:JavaScript 로컬 객체다음 기사:JavaScript 로컬 객체