如何实现文本框输入与预设URL拼接并写入DOM？

原代码存在的问题： #

• HTML结构错误：<html>标签被错误嵌套在<body>内部，不符合HTML标准结构。
• JS语法错误：
  • 变量声明行var val = document.getElementById('pixivurl').value, src = ' val,存在语法错误，多余的单引号和逗号，且src变量未被使用，属于无效代码。
  • 代码中尝试获取不存在的link元素，该行无实际作用，可删除。
  • 拼接URL时使用了未定义的pixivuser变量，正确应该使用获取到的输入框值val，同时代码末尾多了一个双引号，导致语法报错。
• 潜在问题：按钮位于<form>标签内，点击时会触发表单默认提交行为，导致页面刷新，无法保留生成的链接。

修正后的完整代码： #

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
</head>
<body>
    <form id="pixivForm">
        <input type="text" id="pixivurl" value="4165980"/>
        <input type="button" id="btn" value="pixivuserid"/>
    </form>

    <script type="text/javascript">
        document.getElementById('btn').onclick = function(e) {
            // 阻止表单默认提交行为
            e.preventDefault();
            // 获取输入框的值并去除首尾空格
            var val = document.getElementById('pixivurl').value.trim();
            if (!val) {
                alert('请输入用户ID');
                return;
            }
            // 创建链接元素
            var a = document.createElement('a');
            var linkText = document.createTextNode("pixivuser");
            a.appendChild(linkText);
            a.title = "pixivuser";
            // 拼接正确的URL
            a.href = "https://rsshub.app/pixiv/user/" + val;
            // 设置链接在新窗口打开（可选）
            a.target = "_blank";
            // 将链接添加到页面
            document.body.appendChild(a);
            // 添加换行，避免多个链接挤在一起
            document.body.appendChild(document.createElement('br'));
        }
    </script>
</body>
</html>

说明： #

1. 修正了HTML结构，符合标准的<html>包裹<head>和<body>的结构。
2. 添加了阻止表单默认提交的逻辑，避免页面刷新。
3. 修复了URL拼接的语法错误，使用输入框的值val进行拼接。
4. 增加了输入值为空的判断，提升用户体验。
5. 可选添加了target="_blank"让链接在新窗口打开，可根据需求调整。

内容的提问来源于stack exchange，提问作者repeekyraid cero