<div id="readability-page-1" class="page"><div id="post-body-7560279034362998571" itemprop="articleBody">
&nbsp;jquery를 이용해서 html을 조작하는 방법 2가지웹 개발을 하면 javascript로 html을 변경하는 상황이 있다. var html 변수 선언하고html += "&lt;코드코드&gt;"; html += "&lt;코드코드22...&gt;"; $("선택자").html(html);하는 식의 코드는 이제 지양하자.html 코드를 좀 더 깔끔하게 쓸 수 있는 방법 두가지를 소개한다.1. 템플릿 리터럴es6부터 사용가능하다. 백틱을 이용해서 작성한다. 줄바꿈이 바로 적용된다.<blockquote>let name = "김철수";&nbsp;</blockquote><blockquote>let html = `&lt;div&gt;안녕하세요 제 이름은${name} 입니다.&lt;/div&gt;`</blockquote>가장 좋은 점은 백슬래시 지옥에서 벗어날수 있다는 점. 변수는 ${}를 사용하면 + 연산자 없이 가독성 좋은 코드를 쓸 수 있다. ${} 문 안에서 연산도 가능하다.2. jqueryjQuery로 html요소를 만든다. 예시를 보자<blockquote>let ele = $("&lt;div&gt;", {	id: "ele_id"	,class: "ele_class"});</blockquote>$() 첫번째 인자로 html dom요소를 써준다. 두번째 인자로 속성을 json 형식으로 써주면 변수 ele 는 html요소를 저장하게 된다.jQuery( html, attributes ) 이런식으로 작성하면 된다.두가지 방식을 섞어서 사용하면 jQuery로 html 조작하는데 훨씬 깔끔한 코드를 작성 할 수 있다.-fin.

</div></div>

항동킴 Blog

jquery를 이용해서 html을 조작하는 방법 2가지
웹 개발을 하면 javascript로 html을 변경하는 상황이 있다.
var html 변수 선언하고
html += "<코드코드>";
html += "<코드코드22...>";
$("선택자").html(html);
하는 식의 코드는 이제 지양하자.
html 코드를 좀 더 깔끔하게 쓸 수 있는 방법 두가지를 소개한다.
1. 템플릿 리터럴
es6부터 사용가능하다.
백틱을 이용해서 작성한다.
줄바꿈이 바로 적용된다.
let name = "김철수"; 
let html = `<div>안녕하세요 제 이름은${name} 입니다.</div>`
가장 좋은 점은 백슬래시 지옥에서 벗어날수 있다는 점.
변수는 ${}를 사용하면 + 연산자 없이 가독성 좋은 코드를 쓸 수 있다.
${} 문 안에서 연산도 가능하다.
2. jquery
jQuery로 html요소를 만든다.
예시를 보자
let ele = $("<div>", {
	id: "ele_id"
	,class: "ele_class"
});
$() 첫번째 인자로 html dom요소를 써준다.
두번째 인자로 속성을 json 형식으로 써주면
변수 ele 는 html요소를 저장하게 된다.
jQuery( html, attributes )
이런식으로 작성하면 된다.
두가지 방식을 섞어서 사용하면
jQuery로 html 조작하는데 훨씬 깔끔한 코드를 작성 할 수 있다.
-fin.

jQuery로 HTML 변경하는 두가지 방법

댓글