Jquery span value 값 넣기 - Jquery span value gabs neohgi

Question

윈도우 / / 2020. 4. 24. 19:06

목차 Show

값 가져오기
document.getElementById를 이용해서 span 값변경하기

HTML 문서에서 JQuery 를 사용하여 <span> 태그의 텍스트 값 변경 및 가져옵니다.

예시 HTML

<div id="hello"><span></span></div>

값 변경

일반 텍스트 내용 삽입 시

$('#hello span').text('Hi, 반갑습니다.');

HTML이 포함된 경우

$('#hello span').html('Hi, <strong>jQuery span</strong>님 반갑습니다.');

값 가져오기

$('#hello span').text()
$('#hello span').html()

input 창이 아닌 div나 span 으로 깔끔하게 넣고싶을때 사용하는 방법

$(document).ready(function() {

$("#total_cost").text($("#total_cost_value").val());

});

$("#id").text(넣고싶은값);

이렇게 하면 원하는 태그안에 텍스트가 출력됨.

input 창이 아닌 div나 span 으로 깔끔하게 넣고싶을때 사용하는 방법

$(document).ready(function() {

$("#total_cost").text($("#total_cost_value").val());

});

</script>

$("#id").text(넣고싶은값);

이렇게 하면 원하는 태그안에 텍스트가 출력됨.

참조1 : https://jquery.com/

참조2 : https://jqueryui.com/

Home

/

IT정보

/

[jquery]span태그 ID와 Class의 값 가져오기, 넣기

by 백란마귀 on 수요일, 12월 05, 2018 in IT정보

1 jquery span class를 사용하여 가져오기 / 넣기

-html
<span class="span_class">hello</span>

-script
//가져오기
var class_value = $('.span_class').text();
alert(class_value);
//넣기
var class_value = 'Hi';
$('.span_class').text(class_value);

2. jquery span id를 사용하여 가져오기 / 넣기

-html
<span id="span_id">hello</span>

-script
//가져오기
var id_value = $('#span_id').text();
alert(id_value);
//넣기
var id_value = 'Hi';
$('#span_id').text(id_value);

document.getElementById를 이용해서 span 값변경하기

2014. 11. 27. 17:56

JQuery 열심히 공부중인데 너무 어렵다;; 기본적인것도 생각이 안나서 이렇게 저장해둠ㅜ

document.getElementById를 이용해서 span 값 변경방법

<html>
<head>
<title>document.getElementById를 이용해서 span 값변경하기</title>
<script language="javascript">

</script>
</head>
<body>
<span id="test">현재값</span>
<input type="button" value="변경" onclick="spanchange();">
</body>
</html>

안녕하세요? 원주남자입니다.

span태그의 class값을 변경하기 이전에

attr()태그에 대하여 알아여 하는데요. attr()태그는 어떤태그의 id, class, title등의 속성값을 알아내거나 변경할때 사용됩니다.

<img src="/hello.jpg" id="img_hihi" class="img_class">

위 태그를 기준으로 설명드리면 src, id, class가 속성이 되겠네요~

예제를 통해서 알아볼까요~

hello world~ 는 아니고

그 아래에 '안녕하세요??'가 span태그로 작성되어있구요.

또 그 아래에는 button 2개를 배치하였습니다.

<html>
<head>
<title>Home</title>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<style type="text/css">
.type1{
	background-color:black;
	font-size:20px;
	font-color:white;
}
.type2{
	background-color:red;
	font-size:10px;
	font-color:white;
}
</style>
<script type="text/javascript">
function type1_exe(){
	$('#span_hello').attr('class','type1');
}

function type2_exe(){
	$('#span_hello').attr('class','type2');
}
</script> 	
</head>
<body>
<div>
	<h2>
		Hello world!  
	</h2>

	<span id="span_hello" class="" >
		안녕하세요??
	</span>
</div>
<br>
<input type="button" value="type1실행" onclick="type1_exe()"/>
<input type="button" value="type2실행" onclick="type2_exe()"/>
</body>
</html>

각 버튼을 클리하면 class값이 변경이됩니다.

그리고 css에 미리 정의해둔 해당 class의 css의 속성을 적용받게됩니다.

실제로 클릭하게되면은

'typte1실행'버튼 클릭시 화면

'typte2실행'버튼 클릭시 화면

위와 같은 결과를 확인할 수가 있습니다.

한번에 여러개의 속성값을 바꾸는 방법도 있는데요.

<img id="imsi_img" src="hello.png" class="type1">
<script>
/*한번에 한개씩*/
$('#imsi_img').attr('class','type2');
$('#imsi_img').attr('src','hello2.png');
</script>
<script>
/*한번에 여러개~*/
$('#imsi_img').attr({ 
  class: "type2",
  src: "hello2.png"
});
</script>

위에 같은 경우는 한번씩 선언하여서 class와 src값을 바꾸는 방법이 되겠고요.

아래에 있는게 한번에 2개의 속성을 바꾸는 방법이 되겠습니다~

저같은 경우는 2개만을 바꾸었지만 뒤에 쉼표를 붙이면서 더 여러개도 가능하니 참고하세요~

위 예제는 span태그와 img태그에만 적용시킨 예제인데 그 외의 div, p태그등 여러태그에 다양하게 활용이 가능합니다.

Span value 속성 JavaScript span value jQuery span value