9

基本的な質問がありますが、JSにHTMLコードを含めることはできますか？（とdocument.write）

これは私のHTMLコードです：

<li><a href="#" class="menulink">text</a></li>
<li><a href="#" class="menulink">text</a></li>
<li>
  <a href="#" class="menulink">text</a>
  <ul>
    <li>
      <a href="#" class="sub">text</a>
      <ul>
        <li class="topline"><a href="#">text</a></li>
        <li><a href="#">text</a></li>
        <li><a href="#">text</a></li>
        <li><a href="#">text</a></li>
        <li><a href="#">text</a></li>
        <li><a href="#">text</a></li>
        <li><a href="#">text</a></li>
      </ul>
    </li>
    <li>
      <a href="#" class="sub">text</a>
      <ul>
        <li class="topline"><a href="#">text</a></li>
        <li><a href="#">text</a></li>
      </ul>
    </li>

    <li>
      <a href="#" class="sub">text</a>
    </li>
    <li>
      <a href="#" class="sub">text</a>
    </li>
  </ul>
</li>

<li>
  <a href="#" class="menulink">text</a>
</li>
<li><a href="#" class="menulink">text</a></li>

そして、私はそれをこのJSコードに含めたいと思います：

window.onload = function () {
  document.getElementById("menu").innerHTML="";
}

このコードで接続します：

<p id="dropdown_menu"></p>

どうすればいいですか？

完全なコードはここにあります http://jsfiddle.net/tsnave/eSgWj/4/ ありがとう。

4

5 に答える 5

16

これを行う別の方法は、HTML をスクリプト タグ内に配置することです。

<script type="text/template" id="myHtml">
    <li class="topline"><a href="#">some text</a></li>
    <li><a href="#">some text </a></li>
    <li><a href="#">some text</a></li>
    <li><a href="#">some text</a></li>
    <li><a href="#"some text</a></li>
    <li><a href="#">some text</a></li>
    <li><a href="#">some text</a></li>
</script>

次に、次を使用してJavascriptに取得できます

var myHtml = document.getElementById('myHtml').innerHTML;

または、これに役立ついくつかのライブラリのいずれかを使用します。のスクリプト タグ内のコードtype="text/template"は、ブラウザによって解釈または表示されません。Javascript の文字列にそのまま入れるよりもこのアプローチの利点は、エディターで通常の HTML として扱い続けることができ、Javascript をきれいに保つことができることです。John Resig によるこの投稿も参照してください。

于 2012-08-31T13:37:35.610 に答える
12

JSにHTMLコードを含めることはできますか？

つまり、JavaScriptを介してHTMLを出力できる場合、答えは「はい」です。

window.onload = function() {
    document.getElementById("menu").innerHTML = '<li class="topline"><a href="#">some text</a></li>  
                <li><a href="#">some text </a></li>  
                <li><a href="#">some text</a></li>  
                <li><a href="#">some text</a></li>  
                <li><a href="#"some text</a></li>  
                <li><a href="#">some text</a></li>  
                <li><a href="#">some text</a></li>';
}
于 2012-08-31T13:32:25.860 に答える
4 
document.getElementById("menu").innerHTML='
    <li class="topline"><a href="#">some text</a></li>
    <li><a href="#">some text </a></li>
    <li><a href="#">some text</a></li>
    <li><a href="#">some text</a></li>
    <li><a href="#"some text</a></li>
    <li><a href="#">some text</a></li>
    <li><a href="#">some text</a></li>
';

私が実際に行ったのは、引用符を一重引用符に切り替えて、HTML属性が文字列を台無しにしないようにすることだけでした。文字列に一重引用符を入れる必要がある場合はinnerHtml、バックスラッシュでエスケープできますinnerHtml = ' Don\'t break me'。

于 2012-08-31T13:31:43.483 に答える
3

できるよ：

document.getElementById("menu").innerHTML="<div>hello</div>"
于 2012-08-31T13:32:03.007 に答える
1 
window.onload = function(){
    document.getElementById("menu").innerHTML='<li class="topline"><a href="#">some text</a></li><li><a href="#">some text </a></li><li><a href="#">some text</a></li><li><a href="#">some text</a></li><li><a href="#"some text</a></li><li><a href="#">some text</a></li><li><a href="#">some text</a></li>';
}

編集：

動作するはずです。

<script type="text/javascript">
window.onload = function(){
    document.body.innerHTML = 
        '<li><a href="#" class="menulink">text</a></li>'
        +'<li><a href="#" class="menulink">text</a></li>'
        +'<li><a href="#" class="menulink">text</a><ul>'
        +'<li><a href="#" class="sub">text</a><ul>'
        +'<li class="topline"><a href="#">text</a></li>'
        +'<li><a href="#">text </a></li><li><a href="#">text</a></li>'
        +'<li><a href="#">text</a></li><li><a href="#">text</a></li>'
        +'<li><a href="#"text</a></li><li><a href="#">text</a></li></ul>'
        +'</li><li><a href="#" class="sub">text </a><ul>'
        +'<li class="topline"><a href="#">text</a></li>'
        +'<li><a href="#">text</a></li></ul></li>'
        +'<li><a href="#" class="sub">text</a></li>'
        +'<li><a href="#" class="sub">text</a></li>'
        +'</ul></li><li><a href="#" class="menulink">text</a></li>'
        +'<li><a href="#" class="menulink">text</a>';

}

于 2012-08-31T13:33:04.973 に答える