jQuery를 사용하여 div의 innerHTML을 대체하는 방법은 무엇입니까?
다음을 어떻게 얻을 수 있습니까?
document.all.regTitle.innerHTML = 'Hello World';
regTitle내 div ID는 어디에 있습니까?
$("#regTitle").html("Hello World");
HTML () 함수는 HTML의 문자열을 할 수 있으며, 효과적으로 수정합니다 .innerHTML속성을.
$('#regTitle').html('Hello World');
그러나 text () 함수는 지정된 요소의 (text) 값을 변경하지만 html구조는 유지합니다 .
$('#regTitle').text('Hello world');
대신 jquery 객체가있는 경우 기존 콘텐츠 대신 렌더링하려는 경우. 그런 다음 내용을 재설정하고 새로 추가하십시오.
var itemtoReplaceContentOf = $('#regTitle');
itemtoReplaceContentOf.html('');
newcontent.appendTo(itemtoReplaceContentOf);
또는:
$('#regTitle').empty().append(newcontent);
답은 다음과 같습니다.
//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();
대답:
$("#regTitle").html('Hello World');
설명:
$와 동일합니다 jQuery. 둘 다 jQuery 라이브러리에서 동일한 객체를 나타냅니다. "#regTitle"괄호 내부는이라고 선택 당신이 코드를 적용 할 HTML DOM (문서 객체 모델)의 어떤 요소 (들)을 식별하기 위해 jQuery 라이브러리에 의해 사용된다. #전은 regTitlejQuery를 말하고 regTitle는 DOM 내 요소의 id입니다.
거기에서 점 표기법을 사용 하여 내부 html을 괄호 사이에 배치하는 매개 변수로 대체 하는 html 함수 를 호출합니다 'Hello World'.
요소의 내부 HTML을 변경하는 방법에 대한 답변이 이미 있습니다.
그러나 저는 Fade Out / Fade In과 같은 애니메이션을 사용하여 HTML을 변경하여 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);
});
}
jquery에서 html 또는 text 함수를 사용하여 달성 할 수 있습니다.
$("#regTitle").html("hello world");
또는
$("#regTitle").text("hello world");
jQuery .html()는 일치하는 비어 있지 않은 요소 ( innerHTML) 의 내용을 설정하고 가져 오는 데 사용할 수 있습니다 .
var contents = $(element).html();
$(element).html("insert content into element");
예
$( 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>$("#regTitle")[0].innerHTML = 'Hello World';
성능 통찰력을 추가하기 위해.
몇 년 전에 저는 큰 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>Should get you a better performance. I haven't recently tried to measure that (browsers should be clever these days), but if you're looking for performance it may help.
The downside is that you will have more work to keep the DOM and the references in your scripts pointing to the right object.
jQuery has few functions which work with text, if you use text() one, it will do the job for you:
$("#regTitle").text("Hello World");
Also, you can use html() instead, if you have any html tag...
참고URL : https://stackoverflow.com/questions/1309452/how-to-replace-innerhtml-of-a-div-using-jquery
'Development Tip' 카테고리의 다른 글
| 이상한 언어 기능 (0) | 2020.09.27 |
|---|---|
| 이름이 문자열 일 때 JavaScript 함수를 실행하는 방법 (0) | 2020.09.27 |
| CSS로 div의 종횡비 유지 (0) | 2020.09.27 |
| Ruby에서 attr_accessor는 무엇입니까? (0) | 2020.09.27 |
| Node.js / Windows 오류 : ENOENT, stat 'C : \ Users \ RT \ AppData \ Roaming \ npm' (0) | 2020.09.27 |