Question

我有一个模板，我正在通过document.importNode进行迭代克隆。我不能做的是在克隆元素中添加一个类。

var t = document.querySelector('#template');
var clone = document.importNode(t.content, true);
document.querySelector('#target').appendChild(clone);
clone.classList.add('glyphicon glyphicon-search'); // error thrown here, classList is undefined

什么是克隆节点？它说控制台是＃document-fragment。如何在不使用querySelector和索引克隆节点的情况下从克隆中获取创建的元素？

模板看起来像这样：

<template id="template">
    <div class="row">
        <div class="col-xs-3 no"></div>
        <div class="col-xs-6 no2"></div>
        <div class="col-xs-3 quantity"></div>
    </div>
</template>

Answer 1

克隆<template>的内容确实会为您提供一个文档片段。这不是附加到DOM的元素，而是包含一组DOM元素的轻量级包装器 - 因此它不具有classList等属性。

您必须先查询文档片段的内容，然后才能将其附加到DOM ，如下所示：

var t = document.querySelector('#template');
var clone = document.importNode(t.content, true);
// Make any modifications to the clone now
clone.querySelector(".row").classList.add('glyphicon', 'glyphicon-search');
//                          ^^ Note the corrected syntax for classList.add too
document.querySelector('#target').appendChild(clone);

<template id="template">
    <div class="row">
        <div class="col-xs-3 no">No</div>
        <div class="col-xs-6 no2">No2</div>
        <div class="col-xs-3 quantity">Qty</div>
    </div>
</template>
<div id="target">
    
</div>

以下标记中的结果：

<div id="target">
    <div class="row glyphicon glyphicon-search">
        <div class="col-xs-3 no">No</div>
        <div class="col-xs-6 no2">No2</div>
        <div class="col-xs-3 quantity">Qty</div>
    </div>
</div>

Answer 2

我尝试了你的代码，我认为这是标签模板。

如果我使用div标签而不是模板尝试相同的js代码，那么classList可以正常工作。

exec sp_executesql 
N'SELECT TOP 1000 [DBNAME].[dbo].[FTSTABLE].[ID] AS [Id], [DBNAME].[dbo].[FTSTABLE].[Title], [DBNAME].[dbo].[FTSTABLE].[FirstName], [ABOUT 20 OTHERS]
FROM [DBNAME].[dbo].[FTSTABLE]  
WHERE ( ( 
    ( Contains(([DBNAME].[dbo].[FTSTABLE].[Title], [DBNAME].[dbo].[FTSTABLE].[FirstName], [ABOUT 10 OTHERS]), @FieldsList1)) 
AND ( Contains(([DBNAME].[dbo].[FTSTABLE].[Title], [DBNAME].[dbo].[FTSTABLE].[FirstName], [ABOUT 10 OTHERS]), @FieldsList2))
AND ( Contains(([DBNAME].[dbo].[FTSTABLE].[Title], [DBNAME].[dbo].[FTSTABLE].[FirstName], [ABOUT 10 OTHERS]), @FieldsList3))
      ))'
,N'@FieldsList1 nvarchar(10),@FieldsList2 nvarchar(10),@FieldsList3 nvarchar(16)'
,@FieldsList1=N'"SomeString1*"'
,@FieldsList2=N'"SomeString2*"'
,@FieldsList3=N'"SomeString3*"'

您可以尝试将隐藏的样式添加到以前的模板标记中，因此它不会显示在页面中。

从document.importNode获取元素？

2 个答案: