时间戳

首页 > 解决方案 > 附加到无序列表时，无法在“节点”上执行“附加孩子”错误

javascript - 附加到无序列表时，无法在“节点”上执行“附加孩子”错误

问题描述

我正在尝试将<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>

标签： javascriptjqueryhtml

解决方案

您需要使用.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>

推荐阅读