JS中动态创建li并插入HTML标签失效问题求助

阿华AIGC实验室

2026-5-29

问题：设置innerHTML后li内的a标签不生效，仅能添加空li元素

我有一份JSON数据，需要循环遍历它并在每个.searchinput-sub元素中创建一组li标签，编写的代码如下：

var searchinput_sub = document.querySelectorAll(".searchinput-sub"); 
for (var i = 0, max = searchinput_sub.length; i < max; i++) { 
  var jsonResData = JSON.parse(e.data); 
  for(var l=0;l<jsonResData.length;l++){ 
    //create a li element 
    var newEl = document.createElement('li'); 
    newEl.innerHtml ='<a href="#">test</a>'; 
    searchinput_sub[i].querySelector('.resultsHolder').appendChild(newEl); 
  } 
}

但其中newEl.innerHtml ='<a href="#">test</a>';这部分不生效，仅能添加li标签，请问有解决思路吗？

嘿，这个问题其实是个超容易踩的小坑！你写的innerHtml里的H是小写的，但DOM元素的正确属性名是**innerHTML**（注意H是大写）。JavaScript是严格区分大小写的语言，浏览器识别不了拼写错误的innerHtml，自然不会把HTML内容插入到li元素里。

修正后的核心代码：

// 把innerHtml改成正确的innerHTML
newEl.innerHTML = '<a href="#">test</a>';

额外的优化建议：

避免重复解析JSON：你现在把JSON.parse(e.data)放在了外层循环里，每次遍历.searchinput-sub元素都会重新解析一次JSON，这完全是多余的性能损耗。可以把它提到循环外面：

var jsonResData = JSON.parse(e.data); // 移到循环外，只解析一次
var searchinput_sub = document.querySelectorAll(".searchinput-sub"); 
for (var i = 0, max = searchinput_sub.length; i < max; i++) { 
  for(var l=0;l<jsonResData.length;l++){ 
    var newEl = document.createElement('li'); 
    newEl.innerHTML ='<a href="#">test</a>'; 
    searchinput_sub[i].querySelector('.resultsHolder').appendChild(newEl); 
  } 
}

更安全的DOM创建方式：如果你的JSON数据里包含用户输入的内容，用innerHTML可能会有XSS风险。可以用createElement手动创建a标签，更安全可控：

var newEl = document.createElement('li');
var linkEl = document.createElement('a');
linkEl.href = '#';
linkEl.textContent = 'test'; // 或者用innerText，根据需求选择
newEl.appendChild(linkEl);
searchinput_sub[i].querySelector('.resultsHolder').appendChild(newEl);

这样修改后，li标签里的a标签应该就能正常显示啦！

内容的提问来源于stack exchange，提问作者Juliver Galleto