如何添加一些使用JavaScript的HTML我不擦除整个页面(How do I add somet

我有我添加到我的HTML一个小计算器。它有几个下拉菜单选择的东西，当一个人点击提交按钮，我想在我的HTML显示计算器下面的图片。 document.write（）的但清除整个页面：我已经使用JavaScript函数与尝试。有没有一种方法，我可以得到一个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的？这是我从别人的stockoverflow了，但我还是有点困惑

Answer 1:

你需要为你输出的占位符元素。然后设置innerHTML的该元素：

<div id='answer'></div>

然后：

document.getElementById('answer').innerHTML = "answer is:" + yourdata

Answer 2:

不要使用文件撰写，期。使用DOM操作： http://www.quirksmode.org/dom/intro.html

Answer 3:

取而代之的document.write()可以设置innerHTML任何DOM节点的属性添加文本到页面。

说您添加<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
}

文章来源: How do I add something to my html using javascript without erasing the whole page