在JavaScript函数中使用HTML代码

我想知道如何将HTML代码放入JavaScript函数中，如单击按钮时显示的表单代码。我已经学会了如何通过点击按钮将行添加到表中，但是没有涉及到的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>

任何人都可以请告诉我如何使用html代码，而不是在我的Javascript功能？非常感谢。

来源

2015-10-17 Imen Gharsalli

如果我没看错你想点击“添加新行”按钮后，创建一个新的行？ –

预期结果是什么？ – guest271314

谢谢你的回答。 Nop，我已经尝试创建一个新的行，我想要的是将JavaScript代码放在JavaScript代码中，以便在同一页中单击显示表单。 –

您已经编写了用于创建新行的脚本，您只需要将该行添加到您的表中。

document.getElementById('table1').appendChild(newRow);

而且还注释掉符合document.write(......)

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.getElementById('table1').appendChild(newRow); 
 
    //document.write("<h1>Out with the old - in with the new!</h1>"); 
 
}

<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>

来源

2015-10-17 03:06:06

谢谢你的回答。我举的例子就是我已经可以做的事情，但这不是我需要的。事实上，我需要的是在html页面中单击时显示表单，而不会丢失已存在的内容。换句话说，我想将内容添加到我所在的同一页面。 –

开始你可以在一个字符串的HTML存储，然后使用该字符串设置HTML

var html = '<form>'+ 
    '<input type="text">'+ 
    '</form>'; 

document.body.innerHTML = html;

但是如果需要使用大量的html，那么这样做可能会成为维护噩梦。

可以隐藏的HTML，直到你准备好要显示它

CSS

.hide { 
    display:none; 
}

HTML

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

document.querySelector("#someBtn").addEventListener("click",function(){ 
    document.querySelector("#myForm").classList.remove("hide"); 
});

或将HTML插入脚本代码，给脚本标签自定义类型值，这样浏览器不会尝试执行它的JavaScript。然后用HTML创建你的元素，然后追加需要的地方

HTML

<head> 
    <script id="formTemplate" type="my/template"> 
     <form> 
     <input type="text"> 
     </form> 
    </script> 
</head>

document.querySelector("#someButton").addEventListener("click",function(){ 
    var html = document.querySelector("#formTemplate").textContent; 
    var container = document.createElement("div"); 
    container.id = "MyFormContainer"; 
    container.innerHTML = html; 
    document.body.appendChild(container); 
});

或者只是保持你的HTML在一个单独的文件使用ajax请求来获取它，然后根据需要使用它（使用jQuery做ajax请求来创建示例s商场）

somefile。HTML

<form> 
    <input type="text"> 
</form>

jQuery.get("somefile.html").then(function(html){ 
    document.body.innerHTML = html; 
});

来源

2015-10-17 03:21:40

谢谢您的回答。除了已经存在的内容之外，我需要在同一页面中显示新内容。但是使用document.body.innerHTML替换现有的内容。 –

@ghrs这只是一个例子，用你正在使用的任何东西代替 –

我知道，这只是我用String html中的代码尝试了第一个解决方案，它在页面中显示了新内容而没有保留旧内容我需要的。 document.body.innerHTML完全改变了页面的内容。 –

在JavaScript函数中使用HTML代码

回答

相关问题