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>
writeask()関数を取得して、これが実行されるのと同じ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>
<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の初心者なので、今はかなり戸惑っています。誰かが助けることができれば、それは大歓迎です。
前もって感謝します。ダン。