jQuery - HTML

글 작성자: juyoungit

jQuery에는 HTML element 및 attribute를 변경하고 조작할 수 있는 강력한 기능들을 지원합니다.

jQuery Dom 조작

jQuery의 매우 중요한 부분 중 하나는 DOM을 조작할 수 있다는 점입니다. jQuery에는 html element 및 attribute에 쉽게 접근하고 조작할 수 있는 다양한 DOM 관련 method가 제공됩니다.

HTML element로 부터 값을 읽어오기

DOM 조작을 위해서 필요한 세가지 JQuery 메소드의 종류와 그 역할은 다음과 같습니다.

메소드(Method)	내용
text()	선택된 element의 텍스트 내용을 설정하거나 반환
html()	선택한 element의 내용을 설정하거나 반환(HTML 마크업 포함)
val()	form field의 값을 설정하거나 반환

우선, 아래의 예시를 통해서 text()와 html의 차이점에 대하여 간단하게 알아보도록 하겠습니다.

$("#btn1").click(function(){
  alert("Text: " + $("#test").text());
});
$("#btn2").click(function(){
  alert("HTML: " + $("#test").html());
});

위와 같이 작성된 코드가 있다고 할 때 각각을 실행한 결과는 다음과 같이 나타납니다. 아래의 결과를 통해서 확인할 수 있듯이, html() method의 경우, element의 content를 가져올 때 내부에 있는 html tag까지 함께 가져오는 것을 확인할 수 있습니다.

아래의 예시는 val() method를 통해서 input form에 입력된 data를 가져오는 예시 입니다.

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    alert("Value: " + $("#test").val());
  });
});
</script>
</head>
<body>

<p>Name: <input type="text" id="test" value="Mickey Mouse"></p>

<button>Show Value</button>

</body>
</html>

attr()

attr() method는 attribute value를 가져오는 데 사용합니다. 아래의 코드는 페이지에서 button을 클릭한 경우 url이라는 id를 가진 요소의 href 속성값을 가져와서 alert로 해당 정보를 띄우는 것입니다. 전체 과정에서 attr() 메소드가 어떻게 사용되었는 지 확인해보시기 바랍니다.

$("button").click(function(){
  alert($("#url").attr("href"));
});

HTML element가 가지는 값을 변경하기

앞에서는 3개의 method를 통해서 html element가 가진 값을 읽어오는 것이었다면, 이번에는 이전과 동일한 3개의 method를 사용함으로써 html 요소의 내용을 설정하는 내용에 대해서 다뤄보도록 하겠습니다.

메소드(Method)	내용
text()	선택된 element의 텍스트 내용을 설정하거나 반환
html()	선택한 element의 내용을 설정하거나 반환(HTML 마크업 포함)
val()	form field의 값을 설정하거나 반환

위의 method들을 활용해서 아래와 같이 코드를 작성할 수 있습니다. 아래의 코드는 각 요소에 대한 내용을 설정합니다.

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("#btn1").click(function(){
    $("#test1").text("Hello world!");
  });
  $("#btn2").click(function(){
    $("#test2").html("<b>Hello world!</b>");
  });
  $("#btn3").click(function(){
    $("#test3").val("Dolly Duck");
  });
});
</script>
</head>
<body>

<p id="test1">This is a paragraph.</p>
<p id="test2">This is another paragraph.</p>

<p>Input field: <input type="text" id="test3" value="Mickey Mouse"></p>

<button id="btn1">Set Text</button>
<button id="btn2">Set HTML</button>
<button id="btn3">Set Value</button>

</body>
</html>

그리고 다음 세 가지 method text(), html(), val()은 모두 callback function과 함께 제공될 수 있습니다. callback function에는 선택된 element list의 현재 element index와 원래(이전) 값의 두 가지 parameter가 있습니다. 결과적으로 function은 새로운 값으로 사용하려는 문자열을 반환합니다. 아래의 코드는 text(), html()에 대해서 callback function을 적용한 예시입니다. 예시의 코드를 따라가보면서 callback이 어떻게 사용되었는 지 확인해보시기 바랍니다.

$("#btn1").click(function(){
  $("#test1").text(function(i, origText){
    return "Old text: " + origText + " New text: Hello world!
    (index: " + i + ")";
  });
});

$("#btn2").click(function(){
  $("#test2").html(function(i, origText){
    return "Old html: " + origText + " New html: Hello <b>world!</b>
    (index: " + i + ")";
  });
});

여기서 의미가 있는 점은 callback function의 parameter를 통해서 변경하기 이전의 값과 해당 element의 index값에 대해서 접근이 가능하다는 점 입니다. 지금 당장은 그 필요도가 크게 와닿지 않지만 이는 복잡한 기능을 구현함에 있어 아주 유용한 특징이 될 수 있습니다.

attr()

jQuery에서 attr() method는 특정 element의 attribute 값을 설정/변경 하는 데에도 사용할 수 있습니다. 아래와 같이 코드를 작성할 경우 이는 url 이라는 id 속성값을 가진 요소의 href 속성값을 두번째 전달한 매개변수의 값으로 변경하는 작업을 수행하게 됩니다.

$("button").click(function(){
  $("#url").attr("href", "https://juyoungit.tistory.com/");
});

또한 아래와 같이 한 번에 여러가지 속성을 설정하는 것 또한 가능합니다.

$("button").click(function(){
  $("url").attr({
    "href" : "https://juyoungit.tistory.com/",
    "title" : "모든 것을 기록하는 공간"
  });
});

그리고 attr() 메소드 또한 callback function이 함께 제공됩니다. callback function에는 선택된 element list의 현재 요소 인덱스와 원래(이전) 속성 값의 두 가지 매개변수가 존재합니다. 그런 다음 함수에서 새 속성 값으로 사용할 문자열을 반환합니다. 아래의 코드는 attr() 메소드에 대해서 callback function을 적용한 코드입니다. 예시 코드를 천천히 따라가보면서 콜백이 어떻게 사용되었는 지 확인해보시기 바랍니다.

$("button").click(function(){
  $("#w3s").attr("href", function(i, origValue){
    return origValue + "/jquery/";
  });
});

새로운 element 추가하기

jQuery를 사용하면 쉽게 다른 html element/content를 추가할 수 있으며, 이를 수행할 때 다음 네 가지 종류의 method를 사용할 수 있습니다.

메소드(Method)	내용
append()	선택한 요소의 끝에 내용을 삽입
prepend()	선택한 요소의 시작부분에 내용을 삽입
after()	선택한 요소의 다음에 내용을 삽입
before()	선택한 요소의 이전에 내용을 삽입

append()

append() method의 경우 선택된 element가 가지는 content의 마지막 부분에 내용을 추가하는 방식으로 사용됩니다. 아래와 같이 코드를 작성한 경우 모든 <p> element 들에 대해서 append의 parameter로 전달한 내용을 뒤에 추가하게 됩니다.

$("#btn1").click(function(){
    $("p").append(" <b>Appended text</b>.");
});

prepend()

prepend() method의 경우 선택된 element가 가지는 content의 시작 부분에 내용을 추가하는 방식으로 사용됩니다. 아래와 같이 코드를 작성한 경우 모든 <p> element 들에 대해서 append의 parameter로 전달한 내용을 시작 부분 즉, 맨 앞에 추가하게 됩니다.

$("#btn1").click(function(){
    $("p").prepend("<b>Prepended text</b>. ");
});

실제로 append() / prepend() method는 무한한 수의 new element들을 parameter로서 사용할 수 있습니다. 그리고 여기서 말하는 new element는 html, jQuery, JavaScript, DOM 등을 사용하여 생성할 수 있습니다. 아래의 예시는 다양한 방법으로 new element를 생성하고 이를 append의 parameter로 전달하여 새롭게 생성한 element들을 html 문서에 추가하는 것 입니다. 실제로 append는 예시보다 더 많은 숫자의 parameter를 가지고 처리하는 것이 가능하며, 이는 prepend() method에 대해서도 동일하게 동작 합니다.

function appendText() {
  var txt1 = "<p>Text.</p>";               // Create element with HTML 
  var txt2 = $("<p></p>").text("Text.");   // Create with jQuery
  var txt3 = document.createElement("p");  // Create with DOM
  txt3.innerHTML = "Text.";
  $("body").append(txt1, txt2, txt3);      // Append the new elements
}

after()

after method는 새로운 element를 선택된 html element의 뒤에 추가하는 method 입니다. 아래와 같이 코드를 작성하는 경우, img element의 뒤에 parameter로 전달한 내용의 element가 추가 됩니다.

$("#btn2").click(function(){
   $("img").after("<i>After</i>");
});

before()

before method는 새로운 element를 선택된 html element의 앞에 추가하는 method 입니다. 아래와 같이 코드를 작성하는 경우, img element의 앞에 parameter로 전달한 내용의 element가 추가 됩니다.

$("#btn1").click(function(){
    $("img").before("<b>Before</b>");
});

이전에 살펴봤던 append() / prepend() method 처럼 after() / before() method도 무한한 수의 new element들을 parameter로서 사용할 수 있습니다. 그리고 여기서 말하는 new element는 html, jQuery, JavaScript, DOM 등을 사용하여 생성할 수 있습니다. 아래의 예시는 다양한 방법으로 new element를 생성하고 이를 after의 parameter로 전달하여 새롭게 생성한 element들을 html 문서에 추가하는 것 입니다. 실제로 after는 예시보다 더 많은 숫자의 parameter를 가지고 처리하는 것이 가능하며, 이는 before() method에 대해서도 동일하게 동작 합니다.

function afterText() {
  var txt1 = "<b>I </b>";                    // Create element with HTML 
  var txt2 = $("<i></i>").text("love ");     // Create with jQuery
  var txt3 = document.createElement("b");    // Create with DOM
  txt3.innerHTML = "jQuery!";
  $("img").after(txt1, txt2, txt3);          // Insert new elements after <img>
}

element 제거하기

jQuery를 사용하면, 기존에 존재하는 html element를 쉽게 삭제할 수 있으며, 이는 다음 두 가지 method를 사용하여 수행할 수 있습니다.

메소드(method)	내용
remove()	선택한 element 및 해당 element의 child element를 제거
empty()	선택한 element의 child element들을 제거

remove()

remove method는 선택된 element와 해당 element가 가지는 child element를 모두 삭제합니다. 즉, 아래와 같이 코드를 작성한 경우 div1을 id로 하는 element 자체와 그 element가 가지는 모든 child element가 html 문서 상에서 삭제 됩니다.

$("#div1").remove();

empty()

empty method는 선택된 element의 child element를 모두 삭제합니다. 이름 그대로 선택된 element를 "비운다" 라는 느낌으로 이해하면 기억하기 좋습니다. 아래와 같이 코드를 작성할 경우 div1의 id로 하는 element가 가지는 모든 child element가 html 문서 상에서 삭제 됩니다.

$("#div1").empty();

그리고 jQuery의 remove method는 하나의 parameter를 통해서 제거해야할 element를 filtering 할 수 있습니다. 여기서 parameter에는 jQuery의 Selector에 사용되는 구문이 사용됩니다. 즉, 아래와 같이 코드를 작성하는 경우 이는 .test라는 class 에 속하는 element들만 삭제하라는 뜻입니다.

$("p").remove(".test");

filtering을 위한 매개변수는 다음과 같이 하나 이상을 기입하는 것도 가능합니다.

$("p").remove(".test, .demo");

CSS 클래스 가져오기 및 설정

jQuery에서는 다음 method들을 사용해서 쉽게 CSS를 제어할 수 있습니다.

메소드(Method)	내용
addClass()	선택한 요소에 하나 이상의 클래스를 추가
removeClass()	선택한 요소에서 하나 이상의 클래스를 제거
toggleClass()	선택한 요소에서 하나 이상의 클래스를 추가 / 제거 간 전환
css()	스타일 속성을 설정하거나 반환

addClass()

아래의 예시코드를 보면 기존에 존재하는 html element에 대해서 어떻게 새로운 class를 할당하는 지, 그리고 이를 통해서 어떻게 새로운 스타일을 적용하는 지를 확인할 수 있습니다. 아래의 예시처럼 코드를 작성하게 되면 해당 html 문서에 존재하는 h1, h2, p element는 "blue"라는 class에 속하게 되고, div element의 경우, "important" 라는 class에 속하게 됩니다.

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("h1, h2, p").addClass("blue");
    $("div").addClass("important");
  });
});
</script>
<style>
.important {
  font-weight: bold;
  font-size: xx-large;
}

.blue {
  color: blue;
}
</style>
</head>
<body>

<h1>Heading 1</h1>
<h2>Heading 2</h2>

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

<div>This is some important text!</div><br>

<button>Add classes to elements</button>

</body>
</html>

그리고 아래와 같이 addClass method의 parameter 상에서 space로 구분하여 하나 이상의 class를 동시에 할당하는 것도 가능 합니다.

$("button").click(function(){
  $("#div1").addClass("important blue");
});

removeClass()

아래와 같이 코드를 작성할 경우 기존에 존재하는 html element h1, h2, p 는 기존에 속해있던 "blue"라는 class 로부터 벗어나게 됩니다. 마찬가지로 이를 적절히 CSS와 함께 사용하면 적절한 효과를 낼 수 있습니다.

$("button").click(function(){
  $("h1, h2, p").removeClass("blue");
});

toggleClass()

toggleClass()는 addClass() / removeClass() method를 합친 것으로 이해할 수 있습니다. 만약 아래와 같이 코드를 작성한 상태에서 h1, h2, p가 "blue"라는 class에 속해있는 상황이라면, removeClass 처럼 동작하게 되고, 만약 "blue"라는 class에 속해있지 않은 경우 addClass method 처럼 동작하게 됩니다.

$("button").click(function(){
  $("h1, h2, p").toggleClass("blue");
});

jQuery css() method

jQuery의 css() method를 사용하면 선택한 element에 대해서 하나 또는 그 이상의 css property를 설정하거나 반환하도록 할 수 있습니다.

css() 메소드를 사용해서 특정 요소의 속성값을 반환하도록 하려는 경우 다음과 같은 구조로 코드를 작성합니다.

css("propertyname");

아래의 코드는 p element가 가지는 background-color 속성의 값을 반환받아 출력하는 코드 입니다. 그런데 여기서 주목할 점은 p background-color 속성을 가진 p element가 html 문서 내에 여러 개 존재한다는 것 입니다. 실제로 위의 코드를 실행해보면 코드 기준으로 가장 상단에 있는 첫번째 p element가 가지는 background-color 속성의 속성값이 반환되는 것을 확인할 수 있습니다.

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    alert("Background color = " + $("p").css("background-color"));
  });
});
</script>
</head>
<body>

<h2>This is a heading</h2>

<p style="background-color:#ff0000">This is a paragraph.</p>
<p style="background-color:#00ff00">This is a paragraph.</p>
<p style="background-color:#0000ff">This is a paragraph.</p>

<button>Return background-color of p</button>

</body>
</html>

css() 메소드를 사용해서 특정요소의 속성값을 설정하려는 경우 다음과 같은 구조로 코드를 작성합니다.

css("propertyname","value");

아래의 코드는 html 문서 내에 존재하는 모든 p element에 대해서 background-color 속성값을 "yellow"로 설정하게 됩니다. 마찬가지로 background-color를 속성으로 가지는 p element가 여러 개 존재하는 데 아래의 코드를 실행하면 이전과 달리 모든 p element에 대해서 background-color가 yellow로 적용 됩니다. 만약 background-color를 속성으로 가지고 있지 않은 p element라도 이 동작은 모두 동일하게 적용 됩니다.

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("p").css("background-color", "yellow");
  });
});
</script>
</head>
<body>

<h2>This is a heading</h2>

<p style="background-color:#ff0000">This is a paragraph.</p>
<p style="background-color:#00ff00">This is a paragraph.</p>
<p style="background-color:#0000ff">This is a paragraph.</p>

<p>This is a paragraph.</p>

<button>Set background-color of p</button>

</body>
</html>

css() 메소드를 사용해서 특정요소의 여러가지 속성값을 설정하려는 경우 다음과 같은 구조를 코드를 작성합니다. 작성 및 동작원리는 동일하므로 예시는 첨부하지 않겠습니다.

css({"propertyname":"value","propertyname":"value",...});

차원(Dimensions)

jQuery에는 2차원 공간상에서 배치하는 요소들의 크기를 제어하기 위한 다음과 같은 method가 있습니다.

메소드(Method)	내용
width()	요소의 너비를 설정하거나 반환(padding, border, margin 제외)
height()	요소의 높이를 설정하거나 반환(padding, border, margin 제외)
innerWidth()	요소의 너비를 반환(padding 포함, 나머지는 제외)
innerHeight()	요소의 높이를 반환(padding 포함, 나머지는 제외)
outerWidth()	요소의 너비를 반환(padding, border 포함, margin은 제외) (매개변수로 true를 전달할 경우 margin까지 포함하여 너비를 계산)
outerHeight()	요소의 높이를 반환(padding, border 포함, margin은 제외) (매개변수로 true를 전달할 경우 margin까지 포함하여 너비를 계산)

'Web Basic > jQuery' 카테고리의 다른 글

jQuery - AJAX (0)	2021.07.16
jQuery - Traversing (0)	2021.07.16
jQuery - Effect (0)	2021.07.15
jQuery - 개요 (0)	2021.07.15

jQuery - HTML

jQuery Dom 조작

HTML element로 부터 값을 읽어오기

attr()

HTML element가 가지는 값을 변경하기

attr()

새로운 element 추가하기

append()

prepend()

after()

before()

element 제거하기

remove()

empty()

CSS 클래스 가져오기 및 설정

addClass()

removeClass()

toggleClass()

jQuery css() method

차원(Dimensions)

'Web Basic > jQuery' 카테고리의 다른 글

댓글

이 글 공유하기

티스토리툴바

jQuery Dom 조작

HTML element로 부터 값을 읽어오기

attr()

HTML element가 가지는 값을 변경하기

attr()

새로운 element 추가하기

append()

prepend()

after()

before()

element 제거하기

remove()

empty()

CSS 클래스 가져오기 및 설정

addClass()

removeClass()

toggleClass()

jQuery css() method

차원(Dimensions)

'Web Basic > jQuery' 카테고리의 다른 글

댓글

이 글 공유하기

다른 글

jQuery - AJAX

jQuery - Traversing

jQuery - Effect

jQuery - 개요

티스토리툴바