javascript - 如何从数组项生成 HTML？

Question

我正在使用此 JavaScript 代码来过滤搜索项，但我想过滤 div 元素而不仅仅是纯文本。

var searchBox = document.querySelector("input");
var resultList = document.getElementById("resultList");
var resultsArray = [
"Walt Disney",
"Which color do you like?",
"Where are we?",
"Which wells are the best?",
"Who's on first?",
"Cowboys wear white",
"Wells are awesome!",
"Whoooppppeeeeee",
"Which Witch is Which",
"What's going on?",
"Well look at that!"
];


searchBox.addEventListener('keyup', function() {
var searchTerm = searchBox.value.toLowerCase();

// reset ul by removing all li items
while (resultList.hasChildNodes()) {
    resultList.removeChild(resultList.lastChild);
}

// loop through array of sentences
for (var i = 0; i < resultsArray.length; i++) { 
    // if the array item starts with the search value AND the input box is not empty
    if(resultsArray[i].toLowerCase().startsWith(searchTerm) && searchTerm != "") {
        var li = document.createElement('li'); // create an li item
        li.innerHTML = resultsArray[i]; // add the sentence to the new li item
        resultList.append(li); // add new li item to resultList ul
    }
}

// if resultList is empty after going through loop display 'no results found'
if (!resultList.hasChildNodes() && searchTerm != "") {
    var li = document.createElement('li');
    li.innerHTML = "no results found";
    resultList.append(li);
}
});

我想将 var resultsArray 项目更改为 div 类项目，例如:“Walt Disney”，至

 <div class="item"><a href="walt-disney.html"><img src="images/walt-disney.png" alt="walt disney" border="0" /></a>walt disney</div> 

Answer 1

停止创建、追加和删除HTMLElement ，很麻烦

为了避免大量的 for循环并使用document.createElement , .appendChild ，和.removeChild 。我建议使用.innerHTML 。除此之外，无需重写 resultArray 中的项目列表。作为一个对象，只需修改字符串以匹配每个属性的要求，如下所示:

JavaScript 代码:

const searchBox = document.querySelector("input");
const resultList = document.getElementById("resultList");
const resultsArray = [
  "Walt Disney",
  "Which color do you like?",
  "Where are we?",
  "Which wells are the best?",
  "Who's on first?",
  "Cowboys wear white",
  "Wells are awesome!",
  "Whoooppppeeeeee",
  "Which Witch is Which",
  "What's going on?",
  "Well look at that!"
]

String.prototype.removePunctuation = function() {
  return this.replace(/['"`,!?:;.]/g, '')
}

String.prototype.toSnakeCase = function() {
  return this.split(' ').join('-').removePunctuation().toLowerCase()
}

searchBox.addEventListener('keyup', function() {
  const searchTerm = searchBox.value.toLowerCase().trim()
  resultList.innerHTML = ''

  if (searchTerm) {
    const renderedHTML = resultsArray
      .filter(result => result.toLowerCase().indexOf(searchTerm) !== -1)
      .map(result => `
        <div class='item'>
          <a href='${result.toSnakeCase()}.html'>
            <img src='images/${result.toSnakeCase()}.png' alt='${result.removePunctuation()}' border='0'/>
          </a>
        </div>
      `)

    resultList.innerHTML = renderedHTML.length > 0 ? renderedHTML.join('') : 'No results found'
  }
})

HTML 代码:

<input type='text' />
<ul id='resultList'>
</ul>

以下是我对您的代码所做的更改:

• 删除 <ul> 中的所有元素与 .innerHTML = ''
• .trim() 搜索前的空格。
• 迭代resultsArray与 .filter
  • 这使我们能够确定是否应显示某个项目，同时将所有内容保留在数组中。
• 然后我们可以使用 .map 生成 HTML。
  • 这是如何运作的？我们使用模板字符串将值插入到要插入 .innerHTML 的字符串中。

您还会注意到我创建了 String.prototype.removePunctuation和String.prototype.toSnakeCase 。虽然我并不总是建议修改 String.prototype在我看来，它确实使这段代码更具可读性。将其转换为常规函数并不困难。

你认为这不起作用吗？ Test out a working version here on JSFiddle

仅供引用，在您的问题中，您要求 div与 a包含 img 。唯一显示的文本是 alt='...'属性，所以如果你想显示 resultsArray 的文本你应该只使用字符串插值: ${result}