2011-11-06 20 views
1

は、ここに私のコードは次のとおりです。変更テキスト

var headDiv = document.getElementById('sliderContainer'); 
var childDiv = headDiv.childNodes[0]; 
childDiv.innerHTML = 'Working'; 

動作していないように見えること、何ここの問題?ライブ

http://jsbin.com/aqozef/edit#javascript,html,live

フルコード:

<!doctype html> 
<html> 
<head> 
    <script type="javascript"> 
     function scrollit(){ 
      var headDiv = document.getElementById('sliderContainer'); 
      var childDiv = headDiv.childNodes[0]; 
      childDiv.innerHTML = 'Working'; 
     } 
    </script> 
    <style type="text/css"> 
     #sliderContainer{width:100px;height:100px;overflow:hidden;} 
     .sliderContent{width:100px;height:100px;float:left;} 
    </style> 
</head> 

<body> 
    <div id="sliderContainer"> 
     <div class="sliderContent" style="background-color:blue;">s</div> 
     <div class="sliderContent" style="background-color:yellow;">a</div> 
    </div><br/><br/> 
    <button onclick="scrollit();">scroll it</button> 
</body> 
</html> 
+0

を同様 – Saket

答えて

4

最初の子ノードは、テキストノードとない要素ノードである可能性が高いです。二つ目は、1つのテキストノードになる前に

<div> 
    <div> I'm the first element child</div> 
</div> 

最初div後に改行やスペース:これは、あなたのHTMLは次のようになりますと、例えば、ケースです。

、要素ノードを取得children[MDN]を使用するには:

headDiv.children[0].innerHTML = "Working"; 

注: IE6 - IE8は、同様にchildrenにコメントノードが含まれます。そこにコメントがない限り、問題ありません。


また、あなたが最初の要素ノードを探して、子ノードを通過することができます

var child = element.firstChild; 
while(child && child.nodeType !== 1) child = child.nextSibling; 

参考:Node.firstChildNode.nodeType、​​。


テキストノードの値を変更したい場合は、nodeValue[MDN]プロパティ変更する必要があります。

node.nodeValue = "Working"; 
+0

をHTMLコンテンツを投稿してくださいありがとうそれがまさに私ですフェリックス探していた –

+0

あなたは大歓迎です:) –

+0

子供の代わりに、私は 'document.getElementById( 'sliderContainer')のようなgetElementsByTagNameを勧めます。getElementsByTagName(" div ")[0]' –

関連する問題