JavaScript如何将文字直接显示在当前页面,不刷新

Question

问题如下,我该如何编辑f2()函数,来实现得到姓名和年龄,就显示在页面下方

<form action="null" name="form1">
            你的姓名: <input type="text" name="uname" id=""> <br>
            你的年龄: <input type="text" name="uage" id=""> <br>
            <input type="button" name="get" id="" onclick="f2()" value="得到输入信息"> <br>
            
        </form>

我这么写只会重新加载页面再显示,并不会直接显示在下方

function f2(){
                var str1 = document.form1.uname.value;
                var str2 = document.form1.uage.value;
                document.writeln("得到的信息为:"+str1+"还有:"+str2);//这样写会清空页面并输入,不符合预期
                //原因百度如下:
                //不要用document.write（它只能用在页面载入过程中，如果在页面载入完毕后再调用，就会清除掉已显示的页面内容）        
            }

Answer 1

你题目的解答代码如下：

<form action="null" name="form1">
            你的姓名: <input type="text" name="uname" id=""> <br>
            你的年龄: <input type="text" name="uage" id=""> <br>
            <input type="button" name="get" id="" onclick="f2()" value="得到输入信息"> <br>
        </form>
<div id="text"></div>


 
<script type="text/javascript">
function f2(){
                var str1 = document.form1.uname.value;
                var str2 = document.form1.uage.value;
                document.getElementById("text").innerHTML = "得到的信息为:"+str1+"还有:"+str2;//这样写会清空页面并输入,不符合预期
                //原因百度如下:
                //不要用document.write（它只能用在页面载入过程中，如果在页面载入完毕后再调用，就会清除掉已显示的页面内容）        
            }

</script>

如有帮助，望采纳！谢谢!