2012-02-02 91 views
2

我有一個ID爲'headercontent'的div,如果在用戶系統上啓用了javascript,我有一個腳本會在別人之間寫一個鏈接,而且還有一個使用noscript的備份,以防用戶沒有啓用javascript。document.createElement/document.body.appendChild not executed/writing div

代碼運行正常,執行時寫入'a'元素,但問題在於代碼沒有寫入執行的div中。它將它寫入'headercontent'div之外,它忽略儘管它是用呈現的代碼編寫的,但它完全是類風格。我並不太擔心造型/類,因爲我可以在元素中添加一個樣式屬性,並在必要時使用javascript編寫,但我更關心爲什麼它將代碼寫在這個div之外。

我的代碼是:

<div id="headercontent"> 
    hey, this is a div. 
    <a href="#" class="button">This is a link</a> 
    <a href="#" class="button">This is another link</a> 

    <script type="text/javascript"> 
     writeask() 
     function writeask() { 
     var writeaskbox = document.createElement('a'); 
     writeaskbox.href = 'javascript:askbox()'; 
     writeaskbox.className = 'button'; 
     writeaskbox.innerHTML = 
      ['Ask'].join(' ') 
     document.body.appendChild(writeaskbox); 
     } 

     function askbox(){ 
     var askbox = document.getElementById('askbox') 
     if (askbox.style.display == 'none') { 
      askbox.style.display = 'block' 
      askbox.style.height = '150px'    
     } else { 
      askbox.style.display = 'none' 
      askbox.style.height = '0px' 
     } 
     } 
    </script> 
    <noscript><a href="/ask" class="button">Ask</a></noscript> 
</div> 

如何獲得writeask()函數來創建這是在執行同一div A元素?所以,最後的輸出是:

<div id="headercontent"> 
    hey, this is a div. 
    <a href="#" class="button">This is a link</a> 
    <a href="#" class="button">This is another link</a> 
    <a href="javascript: askbox()" class="button">Ask</a> 
</div> 

相反的:

<div id="headercontent"> 
    hey, this is a div. 
    <a href="#" class="button">This is a link</a> 
    <a href="#" class="button">This is another link</a> 
</div> 
<a href="javascript: askbox()" class="button">Ask</a> 

我還是用JavaScript初學者,所以我現在比較困惑。如果任何人都可以提供幫助,那將很受讚賞。

預先感謝您。擔。

回答

3

首先,要調用writeask()之前的函數存在,因此在這種情況下,你應該做它周圍的其他方法。它應該是:

function writeask() {} 
function askbox(){} 

writeask(); 

,然後你被追加到身體

document.body.appendChild(writeaskbox); 

,而不是DIV,因爲它應該是

document.getElementById("headercontent").appendChild(writeaskbox); 
+0

非常感謝你,我會接受你的回答,因爲你指出了我腳本順序的錯誤。這工作完美。 – 2012-02-02 23:37:51

+0

@Shad我會讀到,非常感謝。 – 2012-02-02 23:39:38

+1

@DanS函數 - 函數調用順序不是問題。 JavaScript將函數定義提升到給定範圍的頂部。 – Shad 2012-02-02 23:41:02

3

而不是

document.body.appendChild(writeaskbox); 

使用

document.getElementById("headercontent").appendChild(writeaskbox); 
+0

非常感謝! – 2012-02-02 23:38:29

1

而不是

document.body.appendChild(writeaskbox); 

您應該執行以下操作:

document.getElementById('headercontent').appendChild(writeaskbox); 
+0

非常感謝! – 2012-02-02 23:38:38