将javascript结果打印到div标记

我已能够使其工作，因为它现在添加到<div></div>标记中现在我想删除此数组数字0,1,2,3并将数据填充到<div></div> HTML中的标记，How can这个做，我如何让它插入div标签将javascript结果打印到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>

来源

2017-06-21 Pharell

'STR + = “

" + data[i] + "

”;' – user3297291

@ user3297291，由于做工精细，我非常感谢现在假设我希望把<表我如何展示它.. – Pharell

尝试首先编写看起来像你想要的那样的静态HTML。然后定义它的哪些部分是“动态的”，应该添加/删除/更改。最终，如果您要动态构建大部分UI，则可能需要查看像react，vue，angular或knockout这样的框架。但在这个例子中，你应该能够编写大部分类似于我的初始评论的HTML字符串。例如：''“”+ data [i] +“”' – user3297291

里面既然你已经添加的评论越来越多的要求，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>

来源

2017-06-21 11:22:31 user3297291

我编辑了这个问题，现在再次查看代码。 – Pharell

这也以某种方式回答我的问题，并再次感谢... – Pharell

将javascript结果打印到div标记

回答

相关问题