如何使用javascript在不删除整个页面的情况下向html添加内容_Javascript_Html_Document.write

如何使用javascript在不删除整个页面的情况下向html添加内容

javascript html

如何使用javascript在不删除整个页面的情况下向html添加内容,javascript,html,document.write,Javascript,Html,Document.write,我有一个小计算器，我正在添加到我的html。它有几个下拉列表来选择内容，当一个人点击提交按钮时，我想在我的html中的计算器下面显示一张图片。我曾尝试将javascript函数用于：document.write（），但这会清除整个页面。是否有一种方法可以让javascript函数运行，在单击提交按钮时只向我的页面添加图片以下是我遇到问题的部分代码的基本概要： <html> <head> <script type="text/javascript"> fu

我有一个小计算器，我正在添加到我的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>


函数计算率（）{
//点击提交按钮后显示消息的代码
文件。填写（“回答”）；
}
选择您的选项类型：
1.
2.
3.
选择第二个数字：
1.
2.
3.
4.
5.
6.
7.
8.
9
9
10
11
12

有可能使用某种内部HTML吗？这是我在stockoverflow上从其他人那里得到的信息，但我仍然有点困惑

不要使用document.write，句号。使用DOM操作：

而不是

document.write（）

您可以设置任何DOM节点的

innerHTML

属性来向页面添加文本

假设您在页面末尾（正文标记之前）添加了一个

。然后在您的javascript中：

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

请注意，这将始终重置结果显示的文本。您还可以将该操作包装到函数中：

function displayResult(result){
    result_display.innerHTML = '<h2>' + result + '</h2>'; // or whatever formatting
}

函数显示结果（结果）{
result\u display.innerHTML=''+result+''；//或任何格式
}

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

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

这很有魅力！我可以像你说的那样创建一个空div，然后为图片添加代码。如果在这里提供一些细节，而不仅仅是一个很长文档的链接，这个答案会更好。

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