jQuery克隆template模板添加类和文本后无法追加到指定元素问题排查

问题根因 #

核心问题由两个错误导致：

• 原生<template>标签的可渲染内容存储在自身的content属性中，你直接用jQuery克隆<template id="result">元素本身，克隆的是默认不渲染的template标签节点，而非内部的业务DOM结构，就算插入页面也不会展示内容。
• 表单提交事件未阻止默认跳转行为，表单触发submit后会默认刷新页面，导致刚追加的内容随着页面刷新消失。

解决方法 #

1. 修正表单提交逻辑，阻止默认事件 #

在submit事件回调最开始添加event.preventDefault()，避免页面刷新：

$(document).ready(function () {
    $('#form').on('submit', function (event) {
        // 阻止表单默认提交刷新页面的行为
        event.preventDefault();
        $.ajax({
            data: {...},
            type: 'GET',
            url: '/result'
        }).done(myFunction);
    });
});

2. 修正模板克隆逻辑，正确获取内部内容 #

克隆时先取<template>的content属性中的可渲染DOM，再进行后续操作：

function myFunction(result) {
    // 先获取template的content内容，再克隆可渲染的DOM节点
    const clone = $($('#result')[0].content).clone();
    $('.alert', clone).addClass('myClass');
    $('.someText', clone).text('myText');
    clone.appendTo("#answer");
}

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