자바스크립트에서 동적으로 ul li 태그를 추가 하는 방법입니다.
주로 게시판 댓글 기능에서 대댓글 입력시 사용 합니다.
현재 li 아래에 동적으로 li를 추가하고, 다른 곳에서 추가시 기존 동적 li를 제거하고 추가합니다.
<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.3.js"></script>
<script>
function add(obj) {
$('.add-li').remove();
$(obj).parent().after('<li class="add-li"><textarea placeholder="과일을 입력하세요."></textarea></li>');
}
</script>
</head>
<body>
<ul>
<li>
<span>사과</span>
<button type="button" onclick="add(this)">추가</button>
</li>
<li>
<span>배</span>
<button type="button" onclick="add(this)">추가</button>
</li>
<li>
<span>감</span>
<button type="button" onclick="add(this)">추가</button>
</li>
<li>
<span>바나나</span>
<button type="button" onclick="add(this)">추가</button>
</li>
<li>
<span>귤</span>
<button type="button" onclick="add(this)">추가</button>
</li>
</ul>
</body>
</html>'개발' 카테고리의 다른 글
| 모바일 웹 input focus 안되는 문제 (0) | 2024.07.18 |
|---|---|
| 맥OS 이클립스 에러 - The JVM shared library does not contain the JNI_CreateJavaVM symbol (0) | 2023.10.12 |
| 자바스크립트 ES6 템플릿 리터럴 JSTL과 같이 사용방법 (1) | 2023.01.08 |
| 스프링 외부 경로 리소스 맵핑 (0) | 2023.01.05 |
| 자바 JNI 사용시 이클립스 스프링 톰캣 java.library.path 설정 방법 (0) | 2022.12.09 |