티스토리 뷰

[개발]프로그래밍/jquery

[jquery] 객체 추가 - html()를 활용

좋은 블로그 2016. 10. 13. 08:10

1. 객체 추가

html() 태그를 활용한 문서 객체 내부 추가


2. 객체 추가 - 예제1

◈ 코드


1
2
3
4
5
6
7
8
9
10
11
12
13
<script src="https://code.jquery.com/jquery-1.11.3.js" type="text/javascript"></script>
 
<script>
$(document).ready(function () 
{
    $('div').html('<h1>test1</h1>');
});
</script>
 
<body>
    <div></div>
    <div></div>
</body>




◈ 결과




◈ 결과코드


1
2
3
4
<body>
    <div><h1>test1</h1></div>
    <div><h1>test1</h1></div>
</body>



3. 객체추가 - 예제2

◈ 코드


1
2
3
4
5
6
7
8
9
10
<script src="https://code.jquery.com/jquery-1.11.3.js" type="text/javascript"></script>
 
<script>
$(document).ready(function () 
{
    $('div').html(function(index){
        return '<h1>test'+index+'</h1>';
        });
});
</script>




◈ 결과






◈ 결과코드


1
2
3
4
<body>
    <div><h1>test0</h1></div>
    <div><h1>test1</h1></div>
</body>


4. 객체추가 - 예제3

◈ 코드


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<script src="https://code.jquery.com/jquery-1.11.3.js" type="text/javascript"></script>
 
<script>
$(document).ready(function () 
{
    $('div').html(function(index,html){
        return '<h1>ID -  '+html+'</h1>';
        });
});
</script>
 
<body>
    <div>test1</div>
    <div>test2</div>
</body>




◈ 결과






◈ 결과코드


1
2
3
4
<body>
    <div><h1>ID - test1</h1></div>
    <div><h1>ID - test2</h1></div>
</body>



'[개발]프로그래밍 > jquery' 카테고리의 다른 글

[jqeury] append,prepend - 객체 삽입  (0) 2016.10.14
[jquery] remove() , empty() - 객체 제거 및 비움  (0) 2016.10.13
[jquery] html() , text() - 글자와 관련된 기능  (0) 2016.10.13
[jquery] css() - 객체 스타일 검사, 추가  (0) 2016.10.11
[jquery] attr() - 객체 속성 추가, 삭제  (0) 2016.10.11
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday