2011-05-16 3 views
33

는이 같은 JS에서에 insertbefore를 사용하는 것을 시도하고있다 :이 상단에 추가 할 수 있도록body 태그에 B ?fore() 요소를 삽입하는 방법은 무엇입니까?

var p = document.createElement("p"); 
p.innerHTML = "test1"; 
document.body.insertBefore(p, null); 

var p = document.createElement("p"); 
p.innerHTML = "test2"; 
document.body.insertBefore(p, null); 

하지만 그건 단지 body 태그의 닫기 전에 마지막 페이지 요소를 추가, 어떻게 그것을 사용할 수 열 때? 따라서 마지막으로 추가 된 요소는 body 태그의 첫 번째 요소가됩니다.

document.body.insertBefore(p, document.getElementsByTagName('body')[0]); 

을하지만 불을 지르고 보여줍니다 :

나는 시도

노드를 찾을 수 없습니다 "코드 :"8

+0

사용해보십시오 document.body.prepend - developer.mozilla.org : 그들은 수 'P'태그

document.body.prepend('This text!'); 

링크를하지 않습니다하지만

직접 문자열을 앞에 추가 할 수 있습니다. 또한 일반적으로 innerHTML을 설정하지 않는 것이 좋습니다. 'oldNode.replaceWith (newNode)'사용 또는'oldNode.innerText' 설정 – Gibolt

답변

57

당신은 firstChild으로 body 요소의 첫 번째 자식을 얻을 수 있습니다 재산. 그런 다음 참조로 사용하십시오.

document.body.insertBefore(p, document.body.firstChild); 

jsFiddle.

1

무엇보다 먼저 삽입해야합니다. document.getElementsByTagName('body')[0]신체 요소 1 (구문 트릭의 비트가 모든 브라우저에서 몸체 부재를 얻을 수있다) 이다. 본문에 삽입하려면 첫 번째 요소 앞에 삽입하고 싶습니다. 등이 document.body의 일부 브라우저에서

var body = document.body || document.getElementsByTagName('body')[0], 
    newpar = document.createElement('p'); 
newpar.innerHTML = 'Man, someone just created me!'; 
body.insertBefore(newpar,body.childNodes[0]); 

1 , 다른 document.documentElement을하지만, 모든 브라우저에서 태그 이름은 body

+0

'document.body'을 지원하지 않는 브라우저는 무엇입니까? – alex

+0

@alex 네 말이 맞아. 모든 브라우저가 지원하는 것 같아. 나는 그것이 과거의 과거로부터의 내 기억의 흔적이라고 생각한다. – KooiInc

+0

@Kooilnc 나에게 ​​돌아와 줘서 고마워, 나는 야생에서'document.body'을 많이 가지고 있고 조금 걱정했다 : P – alex

3
document.body.prepend(p); 

이 새로운이다 : 즉,이 같이 볼 수 있었다 (가능성이있는) ES7에 추가. 그것은 바닐라 JS이며 이전 옵션보다 읽을 수 있습니다. 현재 Chrome, FF, Opera 등 83% of browsers에서 사용할 수 있습니다. Polyfill

관련 문제