如何在不擦除整个页面的情况下使用 javascript 向我的 html 添加内容
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11907053/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I add something to my html using javascript without erasing the whole page
提问by R Doolabh
I have a small calculator that I'm adding to my html. It has a few dropdowns to select stuff and when a person hits a submit button, I'd like to display a picture below the calculator in my html. I've tried using a javascript function with: document.write() but that clears the whole page. Is there a way that I can get a javascript function to run which only adds a picture to my page when a submit button is clicked?
我有一个小型计算器，可以添加到我的 html 中。它有一些下拉菜单来选择内容，当一个人点击提交按钮时，我想在我的 html 中的计算器下方显示一张图片。我试过使用 javascript 函数： document.write() 但这会清除整个页面。有没有办法让我运行一个 javascript 函数，它只在单击提交按钮时向我的页面添加图片？
Here's a BASIC outline of my code with the part I'm having trouble with:
这是我的代码的基本轮廓，其中包含我遇到问题的部分：
<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>
would it be possible to use some kind of inner-HTML? That's what I got from others on stockoverflow but I'm still a little confused
是否可以使用某种内部 HTML？这是我从其他人那里得到的关于 stockoverflow 的信息，但我仍然有点困惑
回答by Diodeus - James MacFarlane
You need a placeholder element for your output. Then set the innerHTML for that element:
您的输出需要一个占位符元素。然后为该元素设置innerHTML：
<div id='answer'></div>
then:
然后：
document.getElementById('answer').innerHTML = "answer is:" + yourdata
回答by Marc B
Don't use document.write, period. Use DOM operations: http://www.quirksmode.org/dom/intro.html
不要使用 document.write，句号。使用 DOM 操作：http: //www.quirksmode.org/dom/intro.html
回答by bokonic
Instead of document.write()you can set the innerHTMLproperty of any DOM node to add text to the page.
而不是document.write()您可以设置innerHTML任何 DOM 节点的属性来向页面添加文本。
Say you add a <div id='result'></div>to the end of the page (before the body tag). Then in your javascript have:
假设您将 a 添加<div id='result'></div>到页面末尾（在 body 标记之前）。然后在你的javascript中有：
var result_display = document.getElementById('result');
// and in calc_rate():
result_display.innerHTML = "answer";
Note that this will always reset the result_display's text. You can also wrap that operation in a function:
请注意，这将始终重置 result_display 的文本。您还可以将该操作包装在一个函数中：
function displayResult(result){
result_display.innerHTML = '<h2>' + result + '</h2>'; // or whatever formatting
}
