반응형
자바스크립트에서 동적으로 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 |