Uncaughed TypeError: null의 속성 'appendChild'를 읽을 수 없습니다.
다음 오류가 발생하였습니다.
Uncaughed TypeError: null의 속성 'appendChild'를 읽을 수 없습니다.
myRequest.onreadystatechange @ script.js:20
다음 암호로
// index.html
<html>
<head>
<title>Simple Page</title>
</head>
<body>
<div id="mainContent">
<h1>This is an AJAX Example</h1>
</div>
<script type="text/javascript" src="script.js"></script>
</body>
</html>
그리고 여기 제 자바스크립트 파일이 있습니다.
// script.js
// 1. Create the request
var myRequest;
// feature check!
if(window.XMLHttpRequest) { // Firefox, Safari
myRequest = new XMLHttpRequest();
} else if (window.ActiveXObject){ // IE
myRequest = new ActiveXObject("Microsoft.XMLHTTP");
}
// 2. Create an event handler for our request to call back
myRequest.onreadystatechange = function() {
console.log("We were called!");
console.log(myRequest.readyState);
if(myRequest.readyState === 4){
var p = document.createElement("p");
var t = document.createTextNode(myRequest.responseText);
p.appendChild(t);
document.getElementById("mainContent").appendChild(p);
}
};
// 3. open and send it
myRequest.open("GET","simple.txt", true);
// any parameters?
myRequest.send(null);
여기 , 라고 이 있습니다.simple.txt
이것은 간단한 텍스트 파일의 내용입니다.
여기 @Tejs에서 제안하는 대로 html 하단에 스크립트 태그를 넣었는데도 이 오류가 나타납니다.
querySelector ★★★★★★★★★★★★★★★★★」getElementById그러면 다음 오류가 반환됩니다.
Uncaught TypeError: Cannot read property 'appendChild' of null
HTML에 클래스 이름 또는 ID가 있습니다.
스크립트 태그가 선두에 있는 경우 JavaScript가 HTML보다 먼저 로드되므로 액세스하려는 요소가 아직 DOM에 존재하지 않습니다. 해서 더해야 요.defer이렇게 스크립트에 맞춰주세요.
<script src="script.js" defer></script>
콜백을 실행할 때 ID가 "mainContent"인 요소가 페이지에 없습니다.
줄:
document.getElementById("mainContent").appendChild(p);
document.getElementById("mainContent")null
좋은 답변입니다. 문제가했지만, 「」를 시험해 .<script src="script.js" defer></script>일을 잘 못 했어요.을 사용하다문제는 페이지 선두에 js 파일링크를 넣었기 때문에 DOM이 로드되기 전에 로딩되었습니다.여기에는 두 가지 해결책이 있습니다.
- 사용하다
window.onload = () => { //write your code here }
- , 그럼 여기에다가 더해져요.
<script src="script.js"></script>의 맨로 이동하여 합니다.
querySelector 또는 getElementById를 취득한 경우 다음 오류가 반환됩니다.
Uncaught TypeError: Cannot read property 'appendChild' of null
또는 HTML에 클래스 이름 또는 ID가 있는 경우에도 다른 속성을 사용할 수 있습니다.
사용하지 않음(브라우저 의존도가 너무 높기 때문에 사용 안 함)
<script src="script.js" defer></script> //don't use this
대신, 모든 코드를 안에 있는 'script.disc'에 넣으세요.
$(document).ready(function(){
//your script here.
}
.js 파일의 소스를 정의합니다.<head>HTML 드 html html html html html 。
Javascript를 사용하여 캐시 없이 외부로 로드 시 동일한 문제가 발생하였습니다.
Javascript를 사용하여 캐시 없이 외부 <스크립트> 로드
캐시 문제에 대한 좋은 솔루션을 제공:
하지만 이런 일이 일어났다.Uncaughed TypeError: null의 속성 'appendChild'를 읽을 수 없습니다.
여기 좋은 설명이 있습니다.https://stackoverflow.com/a/58824439/14491024
스크립트 태그가 머리글에 있다고 했듯이 JavaScript는 HTML보다 먼저 로드됩니다.
Visual Studio by C#에서 이 문제는 GUID를 추가하여 다음과 같이 해결됩니다.
[ View ]페이지 소스의 표시는 다음과 같습니다.
리액트랑 같이 있었거든DOM을 생성하기 전에 React가 VirtualDom에 대해 사전 리렌더를 만들 때 충돌하는 것을 방지하려면 시도/실행 또는 if(elem!=syslog)만 사용해야 합니다.
"Cannot read property 'append Child' of null" 오류는 다음 두 가지 이유로 발생합니다.
존재하지 않는 DOM 요소에서 appendChild() 메서드를 호출합니다.
DOM 요소가 선언된 HTML 위에 JS 스크립트 태그를 삽입합니다.
이 문제는 두 번째 오류로 인해 발생합니다.JS 스크립트 태그를 바디 태그에서 헤드 태그로 이동 및 편집하여 해결할 수 있습니다.예를 들어 다음과 같습니다.
// index.html
<html>
<head>
<title>Simple Page</title>
<script async defer src="script.js"></script>
</head>
<body>
<div id="mainContent">
<h1>This is an AJAX Example</h1>
</div>
</body>
</html>
AJAX 투고에서 이 문제가 발생하는 경우, 전송 중인 값과 컨트롤러가 예상하는 값을 비교해야 합니다.
내 경우 직렬화 가능 클래스의 매개 변수를 State에서 State로 변경했습니다.ID, 그리고 나서 AJAX 콜에서 수신 필드를 '데이터'로 변경하지 않았습니다.
success: 함수(데이터) {MakeAddressForm.formData}.StateID = 데이터입니다.상태
클래스가 변경되었습니다.폼데이터에서 뭐라고 부르든 상관없습니다.
이로 인해 업데이트 후 컨트롤러에 다시 게시하려고 했던 폼데이터에 null 참조가 생성되었습니다.분명히 누군가가 (폼의 목적이었던) 상태를 변경해도 오류를 얻지 못했기 때문에 찾기가 어려웠습니다.
이것도 500 에러에 의한 것입니다.제가 낭비한 시간을 절약해 주길 바라면서 이 글을 올렸습니다
페이지 하단에 javascript를 배치합니다(즉, 요소가 정의된 후).
본문 태그 하단에 스크립트 태그를 추가합니다. 그러면 스크립트가 html 컨텐츠 뒤에 로드되면 이러한 오류가 발생하지 않고 =를 추가합니다.
getElementById()의 querySelector를 사용합니다.
var c = document.querySelector('#mainContent');
c.appendChild(document.createElement('div'));
외부 JS 파일은 Angular에 로드할 수 있으며 index.html 파일에 정의하는 대신 직접 로드할 수 있습니다.
component.ts:
ngOnInit() {
this.loadScripts();
}
loadScripts() {
const dynamicScripts = [
//scripts to be loaded
"assets/lib/js/hand-1.3.8.js",
"assets/lib/js/modernizr.jr.js",
"assets/lib/js/jquery-2.2.3.js",
"assets/lib/js/jquery-migrate-1.4.1.js",
"assets/js/jr.utils.js"
];
for (let i = 0; i < dynamicScripts.length; i++) {
const node = document.createElement('script');
node.src = dynamicScripts[i];
node.type = 'text/javascript';
node.async = false;
document.getElementById('scripts').appendChild(node);
}
}
component.component:
<div id="scripts">
</div>
스타일을 비슷하게 로드할 수도 있습니다.
component.ts:
ngOnInit() {
this.loadStyles();
}
loadStyles() {
const dynamicStyles = [
//styles to be loaded
"assets/lib/css/ui.css",
"assets/lib/css/material-theme.css",
"assets/lib/css/custom-style.css"
];
for (let i = 0; i < dynamicStyles.length; i++) {
const node = document.createElement('link');
node.href = dynamicStyles[i];
node.rel = 'stylesheet';
document.getElementById('styles').appendChild(node);
}
}
component.component:
<div id="styles">
</div>
언급URL : https://stackoverflow.com/questions/30014090/uncaught-typeerror-cannot-read-property-appendchild-of-null
'programing' 카테고리의 다른 글
| WordPress의 URL에서 매개 변수 추출 (0) | 2023.03.05 |
|---|---|
| 데이터 스토어로 $rootScope를 사용하는 AngularJS (0) | 2023.03.05 |
| JavaScript와 JSX의 차이점은 무엇입니까? (0) | 2023.03.05 |
| Angular JS컨트롤러 컴포넌트 외부에서 컨트롤러 함수를 호출하는 방법 (0) | 2023.03.05 |
| Java용 JSON 문자열 정리/포맷터 (0) | 2023.03.05 |