运行时向DOM添加Svelte组件失败？静态正常动态appendChild无效

你遇到的问题核心是：Svelte组件不是原生HTML元素，不能用document.createElement()创建，必须通过Svelte的组件实例化方式渲染。下面提供两种可行方案：

方案一：用Svelte响应式遍历渲染（推荐） #

针对表格每行添加按钮的需求，最符合Svelte设计范式的做法是用{#each}遍历表格数据，直接在模板中插入组件，让Svelte自动处理DOM渲染。

示例代码（+page.svelte）：

<script>
    import Button from '$lib/Button.svelte';
    // 模拟数据库获取的表格数据，实际替换为你的数据源
    let tableRows = [
        { id: 1, data: '第一行数据' },
        { id: 2, data: '第二行数据' }
    ];
</script>

<table>
    <thead>
        <tr><th>数据</th><th>操作</th></tr>
    </thead>
    <tbody>
        {#each tableRows as row (row.id)}
            <tr>
                <td>{row.data}</td>
                <td><Button /></td>
            </tr>
        {/each}
    </tbody>
</table>

当表格数据更新时，Svelte会自动同步DOM，无需手动调用appendChild，完全规避原生DOM操作的问题。

方案二：手动实例化Svelte组件（适配特殊场景） #

如果必须通过JS逻辑动态添加组件，需要导入组件后通过类实例化的方式挂载，而不是用createElement。

修改后的+page.svelte代码：

<script>
    import Button from '$lib/Button.svelte';

    function appendButton(targetElement) {
        // 实例化Button组件并挂载到目标DOM节点
        new Button({
            target: targetElement,
            // 如需传递props，添加props字段：props: { key: value }
        });
    }

    // 示例：页面加载后向容器添加按钮
    const container = document.getElementById('my_div_container');
    if (container) {
        appendButton(container);
    }
</script>

<div id="my_div_container"></div>

为什么原方法失效？ #

你之前用document.createElement("Button")创建的是原生<button>元素（注意大小写，原生标签是小写），但Button.svelte是Svelte编译后的自定义组件，并非原生DOM标签。静态引入时Svelte编译器会把<Button />解析为组件实例逻辑，而原生DOM API无法识别自定义组件，所以动态添加时无法渲染。

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