将 JavaScript 结果打印到 div 标签中

我已经能够做到这一点，因为它添加到<div></div>标签中，现在我想删除这个数组编号 0,1,2,3 并将数据输入 HTML 中的<div></div>标签，如何做到这一点，如何让它插入div 标签中

   <html>
<head></head>
<title>Js test</title>
<h1>Js Test</h2>
<body>
<script type="text/javascript">
    var data = new Array();
function addElement(){
    data.push(document.getElementById('ins_name').value);
    data.push(document.getElementById('gpa').value);
    data.push(document.getElementById('da').value);
    document.getElementById('ins_name').value='';
    document.getElementById('gpa').value='';
    document.getElementById('da').value='';
    display();
}
function display(){
    var str = '';
    for (i=0; i<data.length;i++)
    {
        //str+="<tr><td>" + data[i] + "</td></tr>";
        "<tr>
            <td align=center width=176>Institution </td>
            <td align=center>GPA</td>
            <td align=center width=187>Degree Awarded</td>
        </tr>"
        "<tr>
            <td align=center width=176>&nbsp;</td>
            <td align=center>&nbsp;</td>
            <td align=center width=187>&nbsp;</td>
        </tr>"
    }
    document.getElementById('display').innerHTML = str;
}
</script>
<form name="jamestown" id="jamestown" method="post" action="samris.php" />
Institution : <input type="text" name="ins_name" id="ins_name" /></br>
GPA : <input type="text" name="gpa" id="gpa" /></br>
Degree Awarded : <input type="text" name="da" id="da" /></br>
</p>
<input type="button" name="btn_test" id="btn_test" value="Button Add Test" onClick='addElement()'; /></br>
</form>
<div id=display></div>
</body>
</html>

由于您在注释中添加了越来越多的要求，因此innerHTML += ""方法停止工作。

我建议您使用document.createElement创建元素，并使用Node.appendChild将它们添加到您的文档中。

这不是对最初问题的回答，但我认为它比在评论中继续对话更能帮助您。也许您可以编辑您的问题以反映其他要求。

如果我用过的东西你还不明白，请告诉我。很高兴详细说明！

var inputIds = ["ins_name", "gpa", "da"];
var inputElements = inputIds.map(getById);
var tbody = getById("display");
// Create a new row with cells, clear the inputs and add to tbody
function addRow() {
  // Create a row element <tr></tr>
  var row = document.createElement("tr");
  
  inputElements.forEach(function(input) {
    // For each input, create a cell
    var td = document.createElement("td");
    
    // Add the value of the input to the cell
    td.textContent = input.value;
    
    // Add the cell to the row
    row.appendChild(td);
    
    // Clear the input value
    input.value = "";
  });
  
  // Add the new row to the table body
  tbody.appendChild(row);
}
getById("btn_test").addEventListener("click", addRow);
// I added this function because document.getElementById is a bit too long to type and doesnt work with `map` without binding to document
function getById(id) {
  return document.getElementById(id);
}

Institution : <input type="text" name="ins_name" id="ins_name" /><br>
GPA : <input type="text" name="gpa" id="gpa" /><br>
Degree Awarded : <input type="text" name="da" id="da" /><br>
<input type="button" id="btn_test" name="btn_test" value="Add Test"/><br>
<table>
  <thead>
    <tr>
      <th>Institution</th>
      <th>GPA</th>
      <th>Degree</th>
    </tr>
  </thead>
  
  <tbody id="display">
  
  </tbody>
</table>

相关内容

最新更新

热门标签：