2009-09-15 5 views
0

이것은 간단한 웹 페이지 할당을위한 것입니다. 사용innerHTML이 문서에 쓰지 않음

document.getElementByid('list').innerHTML = '<a href=\"index.html\">Main Page</a>'+ 
'<a href=\"benefits.html\">Benefits</a>'+ 
'<a href=\"facts.html\">Shocking Statistics</a>'+ 
'<a href=\"links.html\">Resources</a>'; 

내가 다음 페이지의 상단에 이것을 추가 : 내가 만든 그래서 사이드 바의 링크의 같은 목록을 표시하고 다음과 같은 자바 스크립트를하고자하는 몇 페이지가

그러나 문제는 링크가 나타나지 않고 너무 많은 document.write 줄을 사용하여 돌아 가야 할 수도 있습니다.

답변

3

스크립트가로드 될 때 실행됩니다. 스크립트가 편집하려는 div 요소 앞에 나타나기 때문에 (그리고 실행을 지연시키지 않으므로) document.getElementById는 null을 반환하고 스크립트는 오류를 발생시킵니다.

</body> 직전으로 스크립트를 이동하십시오.

또한이 방법은 getElementById이 아니며 getElementByid이 아닙니다.

즉, 기본 탐색 기능을 추가하는 자바 스크립트에 따라 좋지 않은 생각입니다. pre-processor or server side solution을 사용하는 것이 더 나을 것입니다.

4

나는

getElementByid 

getElementById 

편집해야합니다 ...이 모든 시간을 : 내 실수는 디 ...에서 getElementById를 활용하는 것입니다.

+1

+1 - IDE가 유용합니다. 나는 이클립스를 사용하며 코드 완성은 내가 의존하는 것이다. :) –

+2

도 "불필요합니다."작은 따옴표 안에 있기 때문에 –

+0

사실 그는 오타가 있지만 문제의 일부일뿐입니다. 더 큰 개념적 문제는 타이밍입니다. –

2

아직 존재하지 않는 ID로 요소에 액세스하려고하면 문제가 발생합니다. 스크립트는 포함 된 시점에 실행됩니다. 문서가 파싱되고 DOM 트리가 준비 될 때까지 기다려야합니다. 윈도우 load 이벤트를 사용하거나 Prototype이나 jQuery와 같은 JavaScript 툴킷을 사용하는 경우 일반적으로 어떤 이미지가 먼저 제공됩니다 (모든 이미지가로드 된 후에 window.load이 발생하기 때문에).

편집 : 그리고 물론, 다른 사람들이 말했듯이 오타가 있다는 것은 getElementById입니다.

+0

오타가 근본 원인입니다. 먼저 명백한 문제를 제거한 다음 다시 돌아와 필요한지 확인하십시오 DOM의 상태를 확인하십시오. – Mayo

+0

둘 다 근본 원인이며 수정되지 않은 상태에서는 작동하지 않습니다. –

0

검색하려는 문서 <div> 요소가 아직 문서에 없을 수 있으므로 innerHTML 방식에 문제가 있습니다. 해당 경로로 이동하면 문서가로드 된 후 innerHTML 물건을 호출해야합니다.

document.write은 (는) 잘못된 것이 없습니다. JavaScript로 내용을 동적으로 작성해야하는 경우 document.write을 사용하면로드 이벤트 핸들러가 엉망이되는 것을 피할 수 있으며로드 된 문서를 시각적으로 변경하는 대신 내용을 즉시 표시 할 수 있습니다.

0

참조하는 요소가 초기화되도록 본문이로드 된 후에 javascript를 호출해야합니다. 이렇게하려면 코드를 함수에 넣어야합니다. 예 :

function buildNav() { ...

은} 그런 다음 body 태그에 onload 이벤트를 사용

<body onload="buildNav()">

몸이로드가 완료 될 때까지 자바 스크립트가 실행되지 않습니다 그런 식으로.

0

'id'대문자 및로드 순서 외에 : 자바 스크립트에 의존하는 탐색 링크와 같은 필수 웹 페이지 콘텐츠를 만드는 것은 일반적으로 매우 바람직하지 않습니다.

이것은 접근성 문제를 일으키며 검색 엔진이 모든 링크를 무시한다는 것을 의미합니다. 실제로 복사 및 붙여 넣기를 저장하는 좋은 거래가 아닙니다. <> 태그가 있습니다.

공통 페이지 요소를 재생하려면 서버 기반 페이지 처리 기술을 살펴보십시오. 가장 간단한 방법은 SSI입니다.

관련 문제