자바 스크립트의 setAttribute

Question

나는 다음과 같은 방식으로 '앞으로'에 '가 lorem ipsum의'를 변경하려면 다음을 위해 자바 스크립트 setAttribute을 사용하고 있습니다 :

<span id="pop_title" name="pop_title" class="title01_mc10401 ff_1 fs_10 fc22 fsb">lorem ipsum</span> 

스크립트 :

function modifyDOM(){ 
    var elem_pop = document.getElementById("pop_title"); 
    elem_pop.setAttribute("value","coming"); 
} 

내가 불을 지르고에서 검사, 그 값 속성이 추가되었지만 브라우저에 반영되었음을 보여줍니다 (모질라 3.0.5를 사용 중입니다) 무엇이 문제일까요 ?? 다른 속성을 설정해야합니까 ?? 대신 여기,이 같은

Answer 1

사용 .innerHTML :

function modifyDOM(){ 
    var elem_pop = document.getElementById("pop_title"); 
    elem_pop.innerHTML = "coming"; 
} 

You can try it here. value 속성을 설정하는 것은 <input> 요소와 같을 수 있습니다. 요소 태그 내의 html을 바꾸려면 .innerHTML을 대신 사용하십시오.

Answer 2

span 요소에는 value 특성이 없습니다.

elem_pop.innerHTML = "coming"; 

Answer 3

두 가지 방법으로 (올바르게) 설정할 수 있습니다.

elem_pop.appendChild(document.createTextNode('coming'));

다른 방법은 elem_pop.textContent 및/또는 elem_pop.innerText을 사용하는 것입니다, 그러나 이들은 불행하게도 크로스 브라우저를 작동하지 않습니다 : 현재이 크로스 브라우저의 방법을 사용할 수 있습니다. IE는 innerText 만 지원하며, Firefox는 Chrome 만 지원합니다. textContent - Opera는 둘 모두를 지원하는 유일한 브라우저입니다.

elem_pop.innerHTML을 사용할 수 있지만 innerHTML은 페이지에 텍스트가 아닌 HTML 마크 업을 삽입한다는 점에 유의하십시오. 이것은 특수 문자를 엔티티로 이스케이프하지 않음을 의미합니다. 또한 모든 하위 노드를 자동으로 대체하고 이벤트 리스너를 파괴 할 수 있습니다.

내가 처음 (appendChild()) 방법을 권하고 싶습니다,하지만 당신은 textContent/innerText를 사용하려는 경우 스크립트의 상단에이를 배치 할 수 있습니다 :

HTMLElement.prototype.__defineGetter__('innerText', function(){ return this.textContent; }); 
HTMLElement.prototype.__defineSetter__('innerText', function(t){ this.textContent=t; });

파이어 폭스를 innerText 지원을 줄 것이다 당신이 사용할 수 있습니다 그것 모두 당신이 좋아.