加载HTML数据到DIV选择选项

后你好，我有这样的代码：加载HTML数据到DIV选择选项

<body> 
    <div id="page"> 
    <div id="header">declaration</div> 
    <div id="content"> 
     <div id="option"> 
      <span class='names'> 
       <a href="#">show chapter 1.1.1 content</a>&emsp; 
      </span>1.1.1 Chapter name<br /> 
      <span class='names'> 
       <a href='#'>show chapter 1.1.1.1 content</a>&emsp; 
      </span>1.1.1.1 Chapter name<br /> 
    </div> 
      </div> 
    <div id="footer">declaration</div> 
    </div> 
</body>

当节目链接的用户点击，网页打开HTML文件，并打印从文件中选用章节的内容。（它保存在文件content.html和内容具有ID与章节的名称）文件例如：

<div id="s1"><h1>1 Chapter</h1> 
    <div id="s1.1"><h1>1.1 Chapter</h1> 
     <div id="content1.1"> 
     data 
     </div> 
      <div id="s1.1.1"><h1>1.1.1 Chapter</h1> 
       <div id="content1.1.1"> 
        data 
       </div> 
      </div> 
     </div> 
    </div> 
</div>

当“秀章1.1.1内容”网页用户点击生成验证码：

<body> 
     <div id="page"> 
     <div id="header">declaration</div> 
     <div id="content"> 
      <div id="s1.1.1"><h1>1.1.1 Chapter</h1> 
        <div id="content1.1.1"> 
         data 
        </div> 
       </div> 
      </div> 
     </div>  
     <div id="footer">declaration</div> 
</body>

我尝试这个代码，但它不工作，我不知道如何打开HTML文件，只有一些特定的ID解析与

<script type="text/jscript" language="javascript"> 
    var ul = document.querySelector('#option'); 
    ul.onclick = function (e) { 
     var evt = e || window.event; 
     var target = evt.target || evt.srcElement; 

     var p = document.querySelector('#content'); 
     p.innerHTML = 'Clicked on ' + target.innerHTML; 

     return false; 
    }; 
</script>

来源

2014-05-16 dusan

你不明白你在问什么。服务器上的第二个文件中的第二个HTML示例？如果是这样，你将需要雇用一些AJAX。 –

嗯，其中之一，你不应该使用自闭合div标签（例如：

标签下面的脚注）。 – Jem

您刚刚打印的代码'点击 SparK

我不知道你到底是什么试图做，但下面的代码使事情看起来更清洁。

<script type="text/jscript" language="javascript"> 

    setTimeout(function() { 

      var spanNames = document.querySelectorAll('.names'), 
       content = document.querySelector('#content'); 

      for (var i = 0; i < spanNames.length; i++) { 

       spanNames[i].onclick = function() { 

       content.innerHTML = 'Clicked on ' + this.querySelector('a').innerHTML; 

       return false; 
       }; 
      }; 
    }, 1000); 
</script>

如果你想获取一个远程服务器上的HTML文件及其内容添加到DOM元素，那么你就错过了很多的代码，如AJAX调用。

来源

2014-05-16 16:28:26

document.querySelector（）将在没有.body的情况下工作。 OOPS也是 – mohamedrias

。谢谢你的收获。 –

加载HTML数据到DIV选择选项

回答

相关问题