logo标签列表

如何使用JavaScript向HTML中添加内容而不会清空整个页面

javascripthtmldocument.write
4
我有一个小型计算器，正在将其添加到我的HTML页面上。它有一些下拉列表，可以选择一些内容，当用户点击提交按钮时，我希望在HTML页面中的计算器下方显示一张图片。我尝试使用JavaScript函数document.write()，但它会清除整个页面。是否有办法让JavaScript函数在仅在点击提交按钮时向我的页面添加一张图片？
以下是我代码的基本概述，包括我遇到问题的部分:
<html>

<head>
<script type="text/javascript">

function calc_rate() {

    //code that displays a message after the submit button is hit        
    document.write("answer");
}

</script>

</head>
<body>


<table>


<tr>
    <td class=rate_calc_label>Select Your Option Type:</td>
<td><select name="type1">
    <option></option>
    <option>1</option>
    <option>2</option>
    <option>3</option>
    </select></td>
</tr>  


<tr>
<td class=rate_calc_label>Select The Second Number:</td>
<td><select name="type2">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
    <option>6</option>
    <option>7</option>
    <option>8</option>
    <option>9</option>
    <option>9</option>
    <option>10</option>
    <option>11</option>
    <option>12</option>
    </select></td>
</tr>


<tr>
<td><input type="submit" value="Submit" name="calc_button" onclick="calc_rate()"/></td>
<td></td>
</tr>    

</table>

</body>
</html>

是否可以使用某种内部HTML呢？这是我从Stackoverflow上得到的，但我还有点困惑。

3个回答
12
你需要一个输出的占位符元素。然后设置该元素的innerHTML属性：
<div id='answer'></div>

然后：

document.getElementById('answer').innerHTML = "answer is:" + yourdata
这个太棒了！我按照你说的方法成功地创建了一个空的div，并且在其中添加了一些图片的代码。 - DannyD
4
如果提供一些细节，而不仅仅是一个非常长的文档链接，那么这个答案会更好。 - Isaac
2

与其使用document.write()方法，你可以设置任何DOM节点的innerHTML属性来添加文本到页面中。

比如，在页面末尾（在body标签之前）添加一个<div id='result'></div>，然后在JavaScript中编写：

var result_display = document.getElementById('result');
// and in calc_rate():
result_display.innerHTML = "answer";

请注意，这将始终重置result_display的文本。您还可以将该操作包装在一个函数中：
function displayResult(result){
    result_display.innerHTML = '<h2>' + result + '</h2>'; // or whatever formatting
}
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接