html利用JavaScript键入数据相继显示

问题描述:

html利用JavaScript键入数据相继显示

img

img

img

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="div" class="c1"></div>
    <form action="">
        <input type="text" id="a">
        <button type="button" onclick="add()">dd</button>
        <p> </p>
    </form>
</body>
<script>

    function add(){
        document.getElementById("a").innerHtml

    }
</script>
</html>

你题目的解答代码如下:(如有帮助,望采纳!谢谢! 点击我这个回答右上方的【采纳】按钮)

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <title> 页面名称 </title>
</head>
<body>

<input type="text" id="text" value="" />
<input type="button" value="dd" onclick="fp();" />
<div id="box"></div>

<script type="text/javascript">
function fp() {
    var str = document.getElementById("text").value;
    var div = document.createElement("div");
    div.innerHTML = str;
    var box = document.getElementById("box");
    box.appendChild(div);
}
</script>

</body>
</html>

简单一些的

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <title> 页面名称 </title>
</head>
<body>

<input type="text" id="text" value="" />
<input type="button" value="dd" onclick="fp();" />
<div id="box"></div>

<script type="text/javascript">
function fp() {
    var str = document.getElementById("text").value;
    var box = document.getElementById("box");
    box.innerHTML += str+"<br>";
}
</script>

</body>
</html>

用document.getElementById("a").innerHtml

点击按钮后追加还是输入时追加