document.createElement/document.body.appendChild作成されていないdivが作成されています

Question

ID「headercontent」のdivがあり、ユーザーシステムでjavascriptが有効になっている場合は、ユーザーがjavascriptを有効にしていない場合に備えてnoscriptを使用したバックアップもあります。

コードは正常に実行され、実行時に '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> 

私はそれがで実行されているのと同じdiv要素で、この要素を作成するためにwriteask（）関数を取得するにはどうすればよいですか？最終的な出力になるように：

<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を使用して、初心者です。誰かが助けることができれば、それはよく評価されるだろう。

ありがとうございます。ダン。代わりに、すべての

document.body.appendChild(writeaskbox); 

使用

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

Answer 1

まずの機能は、あなたがそれを他の方法で回避を行う必要があり、この場合には、その存在の前に

Answer 2

、あなたはwriteask（）を呼び出しています。それは

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

Answer 3

代わりの

document.body.appendChild(writeaskbox); 

でなければなりませんよう、

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

writeask(); 

、その後、あなたは身体

document.body.appendChild(writeaskbox); 

、ないのdivにそれを追加している：それはする必要があります

次の操作を行う必要があります。

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