在JavaScript函数中使用HTML代码_Javascript_Html_Forms_Onclick

在JavaScript函数中使用HTML代码

javascript html forms

在JavaScript函数中使用HTML代码,javascript,html,forms,onclick,Javascript,Html,Forms,Onclick,我想知道如何将HTML代码放入JavaScript函数中，比如单击按钮后显示的表单代码。我已经学会了如何通过单击按钮将行添加到表中，但是其中没有HTML代码不能解决我的问题。以下是我使用的代码： <head> <script> function createRow() { var f = document.createElement("form"); f.setAttribute('method', "post"); f.

我想知道如何将HTML代码放入JavaScript函数中，比如单击按钮后显示的表单代码。我已经学会了如何通过单击按钮将行添加到表中，但是其中没有HTML代码不能解决我的问题。以下是我使用的代码：

<head>
  <script>
    function createRow() {
      var f = document.createElement("form");
      f.setAttribute('method', "post");
      f.setAttribute('action', "submit.php");

      var i = document.createElement("input"); //input element, text
      i.setAttribute('type', "text");
      i.setAttribute('name', "username");

      var s = document.createElement("input"); //input element, Submit button
      s.setAttribute('type', "submit");
      s.setAttribute('value', "Submit");

      f.appendChild(i);
      f.appendChild(s);

      //and some more input elements here
      //and dont forget to add a submit button

      document.getElementsByTagName('body')[0].appendChild(f);
      var table1 = document.getElementById("table1");

      var newRow = table1.insertRow(3);
      var newCell = newRow.insertCell(0);
      newCell.innerHTML = "Fe";
      newCell = newRow.insertCell(1);
      newCell.innerHTML = "Fi";
      newCell = newRow.insertCell(2);
      newCell.innerHTML = "Fo";
      newCell = newRow.insertCell(3);
      newCell.innerHTML = "Fum";
      document.write("<h1>Out with the old - in with the new!</h1>");
    }
  </script>
</head>

<body>
  <center>
    <h1>
    Editing HTML Tables
    </h1>
    <table id="table1" border="2">
      <tr>
        <td>Fe</td>
        <td>Fi</td>
        <td>Fo</td>
        <td>Fum</td>
      </tr>
      <tr>
        <td>Fe</td>
        <td>Fi</td>
        <td>Fo</td>
        <td>Fum</td>
      </tr>
      <tr>
        <td>Fe</td>
        <td>Fi</td>
        <td>Fo</td>
        <td>Fum</td>
      </tr>
    </table>
    <br>
    <input type="button" value="Add a new row" onclick="createRow()">
  </center>
</body>


函数createRow（）{
var f=document.createElement（“表单”）；
f、 setAttribute（'method'，'post'）；
f、 setAttribute（'action'，'submit.php'）；
var i=document.createElement（“输入”）；//输入元素，文本
i、 setAttribute（'type'，'text'）；
i、 setAttribute（'name'，'username'）；
var s=document.createElement（“输入”）；//输入元素，提交按钮
s、 setAttribute（'type'，'submit'）；
s、 setAttribute（'value'，'Submit'）；
f、 儿童（一）；
f、 儿童；
//这里还有一些输入元素
//别忘了添加一个提交按钮
document.getElementsByTagName（'body'）[0].appendChild（f）；
var table1=document.getElementById（“table1”）；
var newRow=表1.insertRow（3）；
var newCell=newRow.insertCell（0）；
newCell.innerHTML=“Fe”；
newCell=newRow.insertCell（1）；
newCell.innerHTML=“Fi”；
newCell=newRow.insertCell（2）；
newCell.innerHTML=“Fo”；
newCell=newRow.insertCell（3）；
newCell.innerHTML=“Fum”；
文档。写下（“用旧的写出来，用新的写进去！”）；
}
编辑HTML表格
铁
Fi
法罗群岛
烟
铁
Fi
法罗群岛
烟
铁
Fi
法罗群岛
烟

有人能告诉我如何在Javascript函数中使用html代码吗？

非常感谢。

您已经编写了用于创建新行的脚本，只需将其添加到表中的这一行即可

document.getElementById（'table1'）.appendChild（newRow）
并注释掉以document开头的行。写入（……）


函数createRow（）{
var f=document.createElement（“表单”）；
f、 setAttribute（'method'，'post'）；
f、 setAttribute（'action'，'submit.php'）；
var i=document.createElement（“输入”）；//输入元素，文本
i、 setAttribute（'type'，'text'）；
i、 setAttribute（'name'，'username'）；
var s=document.createElement（“输入”）；//输入元素，提交按钮
s、 setAttribute（'type'，'submit'）；
s、 setAttribute（'value'，'Submit'）；
f、 儿童（一）；
f、 儿童；
//这里还有一些输入元素
//别忘了添加一个提交按钮
document.getElementsByTagName（'body'）[0].appendChild（f）；
var table1=document.getElementById（“table1”）；
var newRow=表1.insertRow（3）；
var newCell=newRow.insertCell（0）；
newCell.innerHTML=“Fe”；
newCell=newRow.insertCell（1）；
newCell.innerHTML=“Fi”；
newCell=newRow.insertCell（2）；
newCell.innerHTML=“Fo”；
newCell=newRow.insertCell（3）；
newCell.innerHTML=“Fum”；
document.getElementById（'table1'）.appendChild（newRow）；
//文档。写下（“用旧的写出来，用新的写进去！”）；
}

编辑HTML表格
铁
Fi
法罗群岛
烟
铁
Fi
法罗群岛
烟
铁
Fi
法罗群岛
烟


您已经编写了用于创建新行的脚本，只需将它附加到表中的这一行即可
document.getElementById（'table1'）.appendChild（newRow）
并注释掉以document开头的行。写入（……）


函数createRow（）{
var f=document.createElement（“表单”）；
f、 setAttribute（'method'，'post'）；
f、 setAttribute（'action'，'submit.php'）；
var i=document.createElement（“输入”）；//输入元素，文本
i、 setAttribute（'type'，'text'）；
i、 setAttribute（'name'，'username'）；
var s=document.createElement（“输入”）；//输入元素，提交按钮
s、 setAttribute（'type'，'submit'）；
s、 setAttribute（'value'，'Submit'）；
f、 儿童（一）；
f、 儿童；
//这里还有一些输入元素
//别忘了添加一个提交按钮
document.getElementsByTagName（'body'）[0].appendChild（f）；
var table1=document.getElementById（“table1”）；
var newRow=表1.insertRow（3）；
var newCell=newRow.insertCell（0）；
newCell.innerHTML=“Fe”；
newCell=newRow.insertCell（1）；
newCell.innerHTML=“Fi”；
newCell=newRow.insertCell（2）；
newCell.innerHTML=“Fo”；
newCell=newRow.insertCell（3）；
newCell.innerHTML=“Fum”；
document.getElementById（'table1'）.appendChild（newRow）；
//文档。写下（“用旧的写出来，用新的写进去！”）；
}

编辑HTML表格
铁
Fi
法罗群岛
烟
铁
Fi
法罗群岛
烟
铁
Fi
法罗群岛
烟


您可以将html存储在字符串中，然后使用该字符串设置html
var html = '<form>'+
    '<input type="text">'+
    '</form>';

document.body.innerHTML = html;

HTML
<form class="hide" id="myForm">
   <input type="text">
</form>


或者将html放入脚本标记中，为脚本标记提供自定义类型值，以便浏览器不会尝试将其作为javascript执行。然后用html创建元素，然后在需要的地方附加它
HTML
<head>
   <script id="formTemplate" type="my/template">
      <form>
         <input type="text">
      </form>
   </script>
</head>


或者只需将html保存在一个单独的文件中，并使用ajax请求获取它，然后根据需要使用它（使用jQuery执行ajax请求以缩小示例）
somefile.html
<form>
   <input type="text">
</form>

您可以将html存储在字符串中，然后使用该字符串设置html
var html = '<form>'+
    '<input type="text">'+
    '</form>';

document.body.innerHTML = html;

HTML
<form class="hide" id="myForm">
   <input type="text">
</form>


或者将html放入脚本标记中，为脚本标记提供自定义类型值，以便浏览器不会尝试将其作为javascript执行。然后用html创建元素，然后在需要的地方附加它
HTML
<head>
   <script id="formTemplate" type="my/template">
      <form>
         <input type="text">
      </form>
   </script>
</head>


或者只需将html保存在一个单独的文件中，并使用ajax请求获取它，然后根据需要使用它（使用jQuery执行ajax请求以缩小示例）
jQuery.get("somefile.html").then(function(html){
   document.body.innerHTML = html;
});