JQuery html() 대 내부 HTML
의 jQuery의 요를 수 ?html()과 동일하게 합니다.innerHTML와 ?innerHTML jQuery의html()방법? 이 두 이 두 방법이 동일하다면 jQuery의 를 사용할 수 있습니까를 사용할 수 요?html()innerHTML?
에서는 는: , .innerHTML속성은 동적으로 채우기 위해 사용되고 있습니다.
응용 프로그램이 Firefox에서 정상적으로 작동하지만 Internet Explorer에서 다음 오류가 발생합니다.unknown runtime exception's 를를 썼어요.html()method와 IE의 error가 사라졌습니다.그러나 모든 브라우저에서 작동할 수 있을지 확신할 수 없으며 모든 브라우저를 교체해야 할지 잘 모르겠습니다.innerHTMLjQuery html()방법.
정말 감사해요.
질문에 대답하기
.html().innerHTML후 nodeType후.nodeType 등을 확인합니다그것은 또한 a를 사용합니다.try/catch다를 합니다.innerHTML jQuery다에게 입니다..empty()+append()
구체적으로 "내부와 같이 수행할 jquery html() 메서드에 완전히 의존할 수 있습니까?HTML" 제 대답은 아니오입니다!
인터넷 익스플로러 7이나 8에서 실행하면 알 수 있습니다.
jQuery는 문자열의 시작 부분이 새 줄인 <P> 태그 내에 중첩된 <FORM> 태그가 포함된 HTML을 설정할 때 잘못된 HTML을 생성합니다!
여기에는 몇 가지 테스트 사례가 있으며 실행 시 주석은 충분히 설명할 수 있어야 합니다.이것은 꽤 모호하지만, 무슨 일이 일어나고 있는지 이해하지 못하는 것은 약간 당황스러운 일입니다.버그 신고를 할 겁니다.
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script>
$(function() {
// the following two blocks of HTML are identical except the P tag is outside the form in the first case
var html1 = "<p><form id='form1'><input type='text' name='field1' value='111' /><div class='foo' /><input type='text' name='field2' value='222' /></form></p>";
var html2 = "<form id='form1'><p><input type='text' name='field1' value='111' /><div class='foo' /><input type='text' name='field2' value='222' /></p></form>";
// <FORM> tag nested within <P>
RunTest("<FORM> tag nested within <P> tag", html1); // succeeds in Internet Explorer
RunTest("<FORM> tag nested within <P> tag with leading newline", "\n" + html1); // fails with added new line in Internet Explorer
// <P> tag nested within <HTML>
RunTest("<P> tag nested within <FORM> tag", html2); // succeeds in Internet Explorer
RunTest("<P> tag nested within <FORM> tag with leading newline", "\n" + html2); // succeeds in Internet Explorer even with \n
});
function RunTest(testName, html) {
// run with jQuery
$("#placeholder").html(html);
var jqueryDOM = $('#placeholder').html();
var jqueryFormSerialize = $("#placeholder form").serialize();
// run with innerHTML
$("#placeholder")[0].innerHTML = html;
var innerHTMLDOM = $('#placeholder').html();
var innerHTMLFormSerialize = $("#placeholder form").serialize();
var expectedSerializedValue = "field1=111&field2=222";
alert( 'TEST NAME: ' + testName + '\n\n' +
'The HTML :\n"' + html + '"\n\n' +
'looks like this in the DOM when assigned with jQuery.html() :\n"' + jqueryDOM + '"\n\n' +
'and looks like this in the DOM when assigned with innerHTML :\n"' + innerHTMLDOM + '"\n\n' +
'We expect the form to serialize with jQuery.serialize() to be "' + expectedSerializedValue + '"\n\n' +
'When using jQuery to initially set the DOM the serialized value is :\n"' + jqueryFormSerialize + '\n' +
'When using innerHTML to initially set the DOM the serialized value is :\n"' + innerHTMLFormSerialize + '\n\n' +
'jQuery test : ' + (jqueryFormSerialize == expectedSerializedValue ? "SUCCEEDED" : "FAILED") + '\n' +
'InnerHTML test : ' + (innerHTMLFormSerialize == expectedSerializedValue ? "SUCCEEDED" : "FAILED")
);
}
</script>
</head>
<div id="placeholder">
This is #placeholder text will
</div>
</html>
jQuery..html()다음과 같은 의도된 기능을 수행합니다..innerHTML 간 검사 즉 브라우저 합니다도 합니다.
의 를 jQuery의 할 수 있습니다..html().innerHTML한
innerHTML은 표준이 아니며 일부 브라우저에서는 작동하지 않을 수 있습니다.모든 브라우저에서 html()을 문제없이 사용하였습니다.
오늘날의 일반적인 지지를 고려할 때, 지금 유일한 효과적인 차이점은.html()html에 코드가 있으면 임의의 태그에서 코드를 실행합니다..innerHTML, HTML5에 따라, 그렇지 않을 것입니다.
jQuery 문서에서 다음을(를)
-j를 할 수 Query(), .append(), .after() 등 HTML 문자열을 받아들이는 모든 jQuery 생성자 또는 메서드는 잠재적으로 코드를 실행할 수 있습니다. 문제는 하거나 코드를 실행하는 :다 HTML는할 수 예:
<img onload="">URL 쿼리 매개 변수, 쿠키 또는 양식 입력과 같이 신뢰할 수 없는 원본에서 얻은 문자열을 삽입하는 데 이러한 방법을 사용하지 마십시오.이렇게 하면 사이트 간 스크립팅(XSS) 취약성이 발생할 수 있습니다.문서에 내용을 추가하기 전에 사용자 입력을 제거하거나 삭제합니다.
참고: 둘 다.innerHTML그리고..html()j 다른 방법으로 실행할 수 있습니다(예:onerror속성).
"이 방법은 브라우저의 내부를 사용합니다.HTML 속성" - jQuery API
여기 시작할 수 있는 코드가 있습니다..inner의 동작을 수정할 수 있습니다.HTML -- 자신의 complete .inner를 만들 수도 있습니다.HTML shim. (P.S.: .inner를 다시 정의합니다.HTML은 Firefox에서도 작동하지만 Chrome에서는 작동하지 않습니다. Chrome에서는 작동합니다.
if (/(msie|trident)/i.test(navigator.userAgent)) {
var innerhtml_get = Object.getOwnPropertyDescriptor(HTMLElement.prototype, "innerHTML").get
var innerhtml_set = Object.getOwnPropertyDescriptor(HTMLElement.prototype, "innerHTML").set
Object.defineProperty(HTMLElement.prototype, "innerHTML", {
get: function () {return innerhtml_get.call (this)},
set: function(new_html) {
var childNodes = this.childNodes
for (var curlen = childNodes.length, i = curlen; i > 0; i--) {
this.removeChild (childNodes[0])
}
innerhtml_set.call (this, new_html)
}
})
}
var mydiv = document.createElement ('div')
mydiv.innerHTML = "test"
document.body.appendChild (mydiv)
document.body.innerHTML = ""
console.log (mydiv.innerHTML)
중요한 차이점은 jQuery가.html() method는 HTML 내부의 인라인 태그를 실행합니다.
페치 요청을 사용하여 데이터를 얻는 과정에서 이것이 나에게 핵심이었습니다.responseHTML을 가지고 있었던 것은<script>WordPress에서 모달 워크를 만드는 과정에서 내부에 태그를 지정합니다.그게 작동이 안 돼서 제가 좀 좁혀봤어요..html()..innerHTML똑같은 줄 알았어요한 후 and를 합니다.<script>다로 ..html()는 안 ..innerHTML.
jandy가 언급한 것처럼 type checking도 있습니다.
스크립트를 실행하기 위해서 RedRiderX가 위 댓글에 링크된 이 질문을 확인하세요: ajax를 통해 html로 로드된 javascript를 실행하는 방법
jQuery.html()이 틈새 질문에 큰 도움이 되지 않는 문서: https://api.jquery.com/html/
언급URL : https://stackoverflow.com/questions/3563107/jquery-html-vs-innerhtml
'source' 카테고리의 다른 글
| Angular.js: 탐지되지 않은 오류, 모듈 없음: myapp (0) | 2023.09.19 |
|---|---|
| MySQL의 복합 FULLTEXT 인덱스 (0) | 2023.09.19 |
| 이미지 로드 실패, net::ERR_CONTENT_LENGTH_MISMATCH (0) | 2023.09.19 |
| Gutenberg에 있는 Woocommerce의 블록에 제품 속성 추가 (0) | 2023.09.19 |
| docker - administrator & mariadb와 함께 compose하여 데이터베이스 연결 시도 시 403을 보여줍니다. (0) | 2023.09.19 |