jQuery append()无法追加input:text输入值的问题排查求助

存在的错误 #

• 你代码中append方法里的内容都是经过转义的HTML实体字符（比如<对应<、"对应"），浏览器不会把这些内容解析为HTML标签，只会当做普通文本渲染，自然无法生成正常的节点插入到ul元素中。
• HTML结构不符合规范：ul元素的直接子元素必须是li标签，当前代码把a标签作为ul的直接子元素，结构错误可能导致渲染异常。
• 文本输入框选择器范围过泛，直接使用$('input:text')会匹配页面内所有文本输入框，若页面存在其他输入框会获取到错误值。

修复后的完整代码 #

$(function() {
    var $newform, $newlinks, $addlinks, $list;
    $newform = $('.form-space');
    $newlinks = $('#newlinks');
    $addlinks = $('#addlink');
    $list = $('ul');
    $newform.hide();

    $newlinks.on('click', function(e) {
        e.preventDefault();
        $newlinks.hide();
        $newform.show();
    });

    $newform.on('submit', function(e) {
        e.preventDefault();
        // 限定从当前表单内查找输入框，避免匹配到其他输入框
        var text = $(this).find('input:text').val().trim();
        // 输入为空的话不提交
        if (!text) return;
        // 调整为符合规范的HTML结构，使用未转义的正常标签
        $list.append(`<li class="links"><a href="https://www.exampleee.com"><span>${text}</span></a></li>`);
        $(this).find('input:text').val('');
        // 提交后恢复初始状态：隐藏表单，显示新建按钮
        $newform.hide();
        $newlinks.show();
    });
});

改动说明 #

• 把转义的HTML实体替换为正常的HTML标签，确保浏览器可以正确解析生成DOM节点
• 调整了DOM嵌套结构，将a标签放到li内部，符合ul元素的嵌套规范
• 优化输入框选择器，限定从当前提交的表单内查找元素，避免匹配到页面其他输入框
• 增加了空值校验逻辑，避免提交空内容
• 补充了提交后的交互逻辑，隐藏表单、重新显示新建链接按钮，和你之前的交互逻辑保持一致

内容的提问来源于stack exchange，提问作者Butt chicks