<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="../css/mystyle.css" type="text/css">
<script src = "../js/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
$(function(){
$('#visible').on('click', function(){
str = "";
/* $('p:visible').each(function(i){}) */
$.each($('p:visible'), function(i){
str += $(this).text()+"<br>";
})
$('#result1 div:eq(0)').html(str);
/* $('#result1 div:first-child').html(str); 왜안돼*/
})
$('#hidden').on('click',function(){
str = "";
$('p:hidden').each(function(i){
str += $(this).text()+"<br>";
})
$('#result1 div:eq(1)').html(str);
})
})
</script>
</head>
<body>
<div class="box">
<br>
<button type="button" id="visible">visible</button>
<button type="button" id="hidden">hidden</button>
<div id="result1">
<p> 보이는 문단</p>
<p style="visibility:hidden">숨겨진 문단</p>
<p style="display:none"> 자리를 차지 하지 못한 문단 </p>
<p style="opacity:0"> 투명한 문단</p>
<div></div>
<div></div>
</div>
</div>
</body>
</html>
신입 개발자 입니다!!!