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：无法在'Document'上执行'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节点。