Question

我可以在html代码中使用div标签，如：

<html>
      <script type="text/javascript" src="insertHtml.js"></script>
      <div id="insertHTML">
           //html gets insterted here
      </div>
</html>

当页面加载insertHtml.js中的函数时，将html添加到页面？

在insertHtml.js：

function addHtml(){
  <center> 
    <table border="0" cellpadding="0" cellspacing="0">
       <tr>
          <td width="480" height="26" background="top.png" 
              onclick="window.open('http://www.google.com','_blank');" 
              valign="center" style="cursor: pointer;border:none">
          </td>
       </tr>
    </table>

    <img src= "b1.png" name="b1" id="b1" width="120" height="120" 
         onclick="clicked(1)" style="cursor: pointer;border:none"/>

    <img src= "b2.png" name="b2" id="b2" width="120" height="120" 
         onclick="clicked(2)" style="cursor: pointer;border:none"/>

    <img src= "b3.png" name="b3" id="b3" width="120" height="120" 
         onclick="clicked(3)" style="cursor: pointer;border:none"/>

    <img src= "b4.png" name="b4" id="b4" width="120" height="120" 
         onclick="clicked(4)" style="cursor: pointer;border:none"/>

    <table border="0" cellpadding="0" cellspacing="0">
      <tr>
         <td width="480" height="45" background="bottom.png" 
             style="border:none" valign="center">
           <center>
               <font face="courier" size="3" color="black"> 
                  Enter name <span id="name">Name </span> Name: &nbsp; 
               </FONT>
               <input type="text" name="myname" id="myname" value=""+ name +"" size="41">
               <button type="button" onclick="copyName()">Copy</button>
           </center>
        </td>
      </tr> 
    </table>
  </center>
}

所以我基本上想要做的就是当脚本运行时它会将html内容添加到div中吗？

Answer 1

是的，可以分两步完成。

1-附加一个dom-ready事件处理程序

<body onload="addHtml()">

2-在你的JS函数中，选择目标div并在其中插入代码：

var htmlStr = '<strong>Code</strong>';
document.getElementById('insertHTML').innerHTML = htmlStr;

希望它有所帮助。

Answer 2

这确实是可能的。将标记放在自己的.html文件中会更明智，并使用XMLHttpRequest（XHR）异步读取该文件的内容。然后，将这些内容复制到所需.innerHTML元素的div属性。

鉴于XHR在各种浏览器中的不同实现，通过像jQuery这样的工具使用抽象方法会更明智。

$(function () {
    $.get("contents.html").then(function( data ) {
        $("myDiv").html( data );
    });
});

文档加载后，外部$(function(){ ... });将执行匿名函数。在内部，我们调用$.get来读取文件的内容（contents.html)。一旦完成该过程，我们通过jQuery将结果data设置为#myDiv的innerHTML $.fn.html方法。

Answer 3

将正文标记添加到HTML文件中：

<body onload="addHTML()">...</body>

的.js：

function addHtml()
 {

 document.getElementById("InsertHTML").innerHTML='<center>'+
  '<table border="0" cellpadding="0" cellspacing="0">' +
  '<tr>' +
  '<td width="480" height="26" background="top.png" onclick="window.open('http://www.google.com','_blank');" valign="center" style="cursor: pointer;border:none">'  +
 '</td>' +
 '</tr>' +
 '</table>' +
 '<img src= "b1.png" name="b1" id="b1" width="120" height="120" onclick="clicked(1)" style="cursor: pointer;border:none"/><!----><img src= "b2.png" name="b2" id="b2" width="120" height="120"  onclick="clicked(2)" style="cursor: pointer;border:none"/><!----><img src= "b3.png" name="b3" id="b3" width="120" height="120"  onclick="clicked(3)" style="cursor: pointer;border:none"/><!----><img src= "b4.png" name="b4" id="b4" width="120" height="120"  onclick="clicked(4)" style="cursor: pointer;border:none"/>' +
  '<table border="0" cellpadding="0" cellspacing="0">' +
 '<tr>' +
 '<td width="480" height="45" background="bottom.png" style="border:none" valign="center">' +
  '<center>' +
  '<font face="courier" size="3" color="black"> Enter name <span id="name">Name </span> Name: &nbsp; </FONT><input type="text" name="myname" id="myname" value=""+ name +"" size="41">' +
  '<button type="button" onclick="copyName()">Copy</button>' +
  '</center>' +
  '</td>' +
  '</tr>' +
  '</table>' +
  '</center>';
 }

或者您可以创建隔离字符串：

var $str = "Hello World"
document.getElementById("InsertHTML").innerHTML = str

阅读多行字符串：http://davidwalsh.name/multiline-javascript-strings

将html插入div标签？

3 个答案: