1017

다음을 어떻게 달성 할 수 있습니까?

document.all.regTitle.innerHTML = 'Hello World';

jQuery를 사용하면 regTitle내 div ID는 어디에 있습니까?

— 토니 프
소스

1530

$("#regTitle").html("Hello World");

— 제드 자의 명칭
소스

320

HTML () 함수는 HTML의 문자열을 할 수 있으며, 효과적으로 수정합니다 .innerHTML속성을.

$('#regTitle').html('Hello World');

그러나 text () 함수는 지정된 요소의 (text) 값을 변경하지만 html구조는 유지합니다 .

$('#regTitle').text('Hello world');

— 좀 바트
소스

12

"하지만 HTML 구조를 유지하십시오". 설명 할 수 있습니까?

— Anoop Joshi

10

jQuery API 설명서 ( api.jquery.com/text )에서 다음 text()과 다릅니다 Unlike the .html() method, .text() can be used in both XML and HTML documents.. 또한있어서 stackoverflow.com/questions/1910794/... , jQuery.html() treats the string as HTML, jQuery.text() treats the content as text.

— Gorgsenegger

1

@AnoopJoshi stackoverflow.com/questions/1910794/…

— 거동

69

대신 jquery 객체가있는 경우 기존 내용 대신 렌더링하려는 경우 내용을 재설정하고 새로운 내용을 추가하십시오.

var itemtoReplaceContentOf = $('#regTitle');
itemtoReplaceContentOf.html('');
newcontent.appendTo(itemtoReplaceContentOf);

또는:

$('#regTitle').empty().append(newcontent);

— 시네
소스

17

사용하기 좋은 곳itemtoReplaceContentOf.empty();

— Kevin Panko

가 newcontentJQuery와 객체입니다? 이것은 명확하지 않습니다.

— kmoser

@kmoser 첫 번째 예에서 newcontent는 실제로 jquery 객체입니다. 두 번째 예에서는이 유형이 될 수 htmlString또는 Element또는 Text또는 Array또는 jQuery당 api.jquery.com/append

— 시네

27

답은 다음과 같습니다.

//This is the setter of the innerHTML property in jQuery
$('#regTitle').html('Hello World');

//This is the getter of the innerHTML property in jQuery
var helloWorld = $('#regTitle').html();

— 덴마크 사람
소스

11

대답:

$("#regTitle").html('Hello World');

설명:

$와 같습니다 jQuery. 둘 다 jQuery 라이브러리에서 동일한 객체를 나타냅니다. "#regTitle"괄호 내부는이라고 선택 당신이 코드를 적용 할 HTML DOM (문서 객체 모델)의 어떤 요소 (들)을 식별하기 위해 jQuery 라이브러리에 의해 사용된다. #전은 regTitlejQuery를 말하고 regTitle는 DOM 내 요소의 id입니다.

여기에서 점 표기법은 내부 html을 괄호 사이에 배치하는 매개 변수 (이 경우에는)로 바꾸는 html 함수 를 호출하는 데 사용됩니다 'Hello World'.

— Webeng
소스

11

요소의 내부 HTML을 변경하는 방법을 제공하는 답변이 이미 있습니다.

그러나 Fade Out / Fade In과 같은 일부 애니메이션을 사용하여 HTML을 변경하면 내부 HTML을 즉시 변경하는 대신 변경된 HTML의 효과를 높일 수 있다고 제안합니다.

애니메이션을 사용하여 내부 HTML 변경

$('#regTitle').fadeOut(500, function() {
    $(this).html('Hello World!').fadeIn(500);
});

이것을 필요로하는 많은 함수가 있다면 내부 HTML을 변경하는 공통 함수를 호출 할 수 있습니다.

function changeInnerHtml(elementPath, newText){
    $(elementPath).fadeOut(500, function() {
        $(this).html(newText).fadeIn(500);
    });
}

— 솜 나트 물 루크
소스

11

jquery에서 html 또는 text 함수를 사용하여 달성 할 수 있습니다

$("#regTitle").html("hello world");

또는

$("#regTitle").text("hello world");

— 지텐 드라 바 쉬니
소스

9

jQuery .html()는 일치하지 않는 일치하지 않는 요소 ( innerHTML) 의 내용을 설정하고 가져 오는 데 사용할 수 있습니다 .

var contents = $(element).html();
$(element).html("insert content into element");

— 프라 틱
소스

html 이후의 열기와 닫기 괄호가 저를 구했습니다. 따라서이 두 사람이 중요하다는 것을 기억하십시오.

— Gellie Ann

9

예

$( document ).ready(function() {
  $('.msg').html('hello world');
});

    <!DOCTYPE html>
    <html>
      <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>    
      </head>
      <body>
        <div class="msg"></div>
      </body>
    </html>

스 니펫 확장

— 니킷 바로 키야
소스

7

$("#regTitle")[0].innerHTML = 'Hello World';

— 알베이스 벨론 토메
소스

3

성능에 대한 통찰력을 추가하십시오.

몇 년 전에 저는 다양한 HTML 요소에 큰 HTML / 텍스트를 설정하는 데 문제가있는 프로젝트가있었습니다.

요소를 "재 작성"하고 DOM에 주입하는 것은 DOM 컨텐츠를 업데이트하는 제안 된 방법보다 훨씬 빠릅니다.

그래서 같은 :

var text = "very big content";
$("#regTitle").remove();
$("<div id='regTitle'>" + text + "</div>").appendTo("body");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

스 니펫 확장

더 나은 성능을 제공해야합니다. 나는 최근에 그것을 측정하려고 시도하지 않았지만 (요즘 브라우저는 영리해야합니다.) 성능을 찾고 있다면 도움이 될 수 있습니다.

단점은 DOM과 스크립트의 참조가 올바른 객체를 가리 키도록하기 위해 더 많은 작업이 필요하다는 것입니다.

— 파벨 돈 체프
소스

3

jQuery에는 텍스트와 함께 작동하는 기능이 거의 없으며, text()하나만 사용하면 자동으로 작동 합니다.

$("#regTitle").text("Hello World");

또한 html 태그html() 가 있으면 대신 사용할 수 있습니다 ...

— 알리레자
소스

jQuery를 사용하여 div의 innerHTML을 바꾸는 방법은 무엇입니까?

애니메이션을 사용하여 내부 HTML 변경