我正在尝试将<li>
项数据列表添加到<ul>
中。当我执行console.log时,内容返回以下内容:
<li class="nav-item col-lg-2">
<a class="nav-link" href="#">Apple</a>
</li>
<li class="nav-item col-lg-2">
<a class="nav-link" href="#">Banana</a>
</li>
所以我尝试将其附加到section
上,并且不允许我显示错误消息:Failed to execute 'appendChild' on 'Node'
。我在这里做错了什么?谢谢!
var data = [{
"id": "1",
"name": "Apple"
},{
"id": "2",
"name": "Banana"
}];
var section = document.createElement("ul");
section.setAttribute('class', "col-12 nav nav-tabs nav-fill");
var template = document.querySelector('#lists').innerHTML;
var contents = '';
for(var i = 0; i < data.length; i++){
contents += template.replace(/\{\{name\}\}/, data[i].name);
}
section.appendChild(contents);
document.getElementById('test').appendChild(section);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="row" id="test">
<script type="template" id="lists">
<li class="nav-item col-lg-2">
<a class="nav-link" href="#">{{name}}</a>
</li>
</script>
</div>
答案 0 :(得分:2)
您需要使用.insertAdjacentHTML()而不是 .appendChild(contents); ,因为您要添加的内容是html字符串而不是html节点。
var data = [{
"id": "1",
"name": "Apple"
},{
"id": "2",
"name": "Banana"
}];
var section = document.createElement("ul");
section.setAttribute('class', "col-12 nav nav-tabs nav-fill");
var template = document.querySelector('#lists').innerHTML;
var contents = '';
for(var i = 0; i < data.length; i++){
contents += template.replace(/\{\{name\}\}/, data[i].name);
}
section.insertAdjacentHTML('beforeend', contents);
document.getElementById('test').appendChild(section);
<div class="row" id="test">
<ul type="template" id="lists">
<li class="nav-item col-lg-2">
<a class="nav-link active" href="#">{{name}}</a>
</li>
</ul>
</div>