如何通过用户输入赋值的变量操作HTML中的Text元素？

需求：通过表单输入内容，将输入值存入变量input，并用该值替换ID为varname的元素文本（初始文本为"Spartan"）。

原实现代码 #

<div class="middle">
    <h2 class="greet" id="demo">Welcome Back,&nbsp; <span id="varname">Spartan</span></h2>
     <div class="form">
    <form>
        <label for="Name">Enter Your Name</label>
        <input type="text" id="Name">
        <input type="submit" value="Submit" onclick="myFunction()">
    </form>
    </div>
    <script>
        function myFunction(){
            var input= document.getElementById("Name").value;
            document.getElementById("varname").innerHTML = input;
        }
    </script>

问题说明 #

原代码存在一个核心问题：点击提交按钮时，表单会触发默认的提交行为，导致页面刷新，替换后的文本会瞬间消失，无法保留修改效果。

修正后的代码方案 #

方案1：阻止表单默认提交行为

<div class="middle">
    <h2 class="greet" id="demo">Welcome Back,&nbsp; <span id="varname">Spartan</span></h2>
    <div class="form">
        <form onsubmit="return myFunction()">
            <label for="Name">Enter Your Name</label>
            <input type="text" id="Name">
            <input type="submit" value="Submit">
        </form>
    </div>
    <script>
        function myFunction(){
            var input = document.getElementById("Name").value;
            // 推荐用textContent替代innerHTML，避免XSS风险
            document.getElementById("varname").textContent = input;
            // 阻止表单默认提交行为
            return false;
        }
    </script>

方案2：用普通按钮替代提交按钮

如果不需要表单提交功能，直接用普通按钮更简洁：

<div class="middle">
    <h2 class="greet" id="demo">Welcome Back,&nbsp; <span id="varname">Spartan</span></h2>
    <div class="form">
        <label for="Name">Enter Your Name</label>
        <input type="text" id="Name">
        <button type="button" onclick="myFunction()">Submit</button>
    </div>
    <script>
        function myFunction(){
            var input = document.getElementById("Name").value;
            document.getElementById("varname").textContent = input;
        }
    </script>

关键要点 #

• 获取输入值：通过document.getElementById("Name").value可以获取输入框的当前内容。
• 修改元素文本：优先使用textContent设置元素纯文本内容，相比innerHTML更安全，避免解析HTML标签引发的XSS风险。
• 处理表单提交：若使用<input type="submit">，需通过return false或event.preventDefault()阻止表单默认提交行为，防止页面刷新丢失修改结果。

内容的提问来源于stack exchange，提问作者Aadhil Anwar