Javascript:创建在 JSP 中定义的 DOM 元素

Question

在我的 .jsp 文件中，我定义了一个这样的列表:

<script type="text" id="my_list">
    <ol class="a-ordered-list a-vertical a-spacing-medium"></ol>
</script>

我想在需要时动态地在 Javascript 中创建这样的列表(使用此处定义的确切 css)。像这样:

function updateData(data, cell, $) {
    var list = document.createElement($("#my_list").html());
    // ...

但是这会导致:

未捕获的 DOMException:无法在“文档”上执行“createElement”:提供的标签名称

('
        <ol class="a-ordered-list a-vertical a-spacing-medium"></ol>
    ')

不是有效名称。

如何实现？如何在 JS 中动态创建来自 HTML 的预定义元素？

Answer 1

由于您使用的是 jQuery:

var list = $($("#my_list").html());

然后您可以使用 jQuery API 将其附加到 DOM(例如):

$("#something").append(list);

document.createElement() API 只需要一个标签名称，因此传递完整的标记是导致错误的原因。但是对于 jQuery，标记是可以的，它使用不同的方法来构建新的 DOM 节点。