jquery를 사용하여 div 태그 값 설정


81

이 html div 태그가 정의되어 있습니다.

<div style="height:100px; width:100px" class="total-title">
    first text
</div>

값을 변경하는 jquery 코드가 있습니다.

 $('div.total-title').html('test');

그러나 이것은 div의 내용을 변경하지 않습니다.


2
문을 정확히 어디에서 실행합니까 : $ ( 'div.total-title'). html ( 'test'); ??
Niek H.

1
DOM이 준비된 후 js 코드를 호출하면 코드에 전혀 문제가 없습니다. Farzad, 올바르게 대답했습니다.
simplyharsh

답변:


156

값이 순수한 텍스트 (예 : 'test') 인 경우 text () 메서드도 사용할 수 있습니다. 이렇게 :

$('div.total-title').text('test');

어쨌든, 당신이 공유하고있는 문제에 대해, DIV의 HTML 코드가 브라우저로 전송되기 전에 당신이 JavaScript 코드를 호출하고있을 수 있다고 생각합니다. <div> 뒤의 <script> 태그 또는 다음과 같은 명령문에서 jQuery 행을 호출하고 있는지 확인하십시오.

$(document).ready(
    function() {
        $('div.total-title').text('test');
    }
);

이렇게하면 div의 HTML이 브라우저에 의해 구문 분석 된 후에 스크립트가 실행됩니다.


3
div.total-value처럼 넣으면 작동하지 않았습니다. 하지만 # total-value처럼 만든 후에 작동합니다
Nipuna 2011

익명의 함수를 랩해야하는 이유는 무엇입니까? 그것 없이도 작동할까요?
Nahser Bakht 2013

로드가 완료되지 않은 경우 페이지가 아직 설정되지 않았기 때문에 <head>의 최상위 수준에 원시 코드를 넣으면 div가 아직 존재하지 않을 수도 있습니다.
DragonLord

평가를 지연하려면 ready 또는 anonymous 함수가 필요합니다. 이 중복 된 경우 코드가 과도하다고 생각하지만 나중에 실수를 방지하기 위해 잘라 내기 및 붙여 넣기 소프트웨어 관리자를 권장합니다.
DragonLord

그래, 나는 그것이해야한다고 생각$('#div.total-title').text('test');
hynsey

9

텍스트를 넣으려면 .text('text')

을 사용하려면 .html(SomeValue)SomeValue에 div 내부에있을 수있는 html 태그도 있어야합니다.

farzad가 말했듯이 스크립트 위치를 확인하십시오.

참조 : .html텍스트



4

당신은 jQuery JS 파일을 참조하지 않았습니까? farzad의 대답이 작동하지 않아야 할 이유가 없습니다.


0

.html()메소드를 사용할 때 a htmlString는 매개 변수 여야합니다. ( source ) HTML 태그 안에 문자열 .text()을 넣으면 farzad가 제안한대로 작동하거나 사용해야 합니다.

예:

<div class="demo-container">
    <div class="demo-box">Demonstration Box</div>
</div>

<script type="text/javascript">
$("div.demo-container").html( "<p>All new content. <em>You bet!</em></p>" );
</script>

0

아래와 같이 사용 :

<div id="getSessionStorage"></div>

이것을 추가하려면 참조를 위해 아래 코드를 사용하십시오.

$(document).ready(function () {
        var storageVal = sessionStorage.getItem("UserName");
        alert(storageVal);
        $("#getSessionStorage").append(storageVal);
     });

이것은 html에서 아래와 같이 나타납니다 (storageVal = "Rishabh"라고 가정).

<div id="getSessionStorage">Rishabh</div>
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.