JS 中模板字符串中的 HTML 元素

Question

我在模板字符串中添加 HTML 元素时遇到问题。我想在我的<li>元素中添加新行，但<br>被解释为字符串。

let movieDescription = document.createTextNode(`${moviesData[i].title} <br> ${moviesData[i].year} <br> ${moviesData[i].genre} <br>${moviesData[i].summary}`);

如何<br>在模板字符串中添加元素？

Answer 1

正如您已经知道的那样，<br>HTML 不是文本。因此，您需要解析模板文字才能正确渲染换行符。最常见的方法是使用 property .innerHTML，尽管我读过很多关于它有多糟糕的帖子和博客，但我从来没有遇到过问题。在此示例中，我们使用insertAdjacentHTML()（注意模板文字有<div>s 和<hr>s）：

var movieDescription = `
<hr>
<div>Title: ${moviesData[i].title}</div> 
<div>Year: ${moviesData[i].year}</div> 
<div>Genre: ${moviesData[i].genre}</div> 
<div>Summary: ${moviesData[i].summary}</div>
<hr>`;

 document.querySelector('.dock').innerHTML = movieDescription;

另一种方法是insertAdjacentHTML()。就像innerHTML服用类固醇一样。

优点：

• 它比更快更安全innerHTML

• 它允许我们具体确定插入应该与目标元素相关的位置：

  • beforebegin:插入 HTML <div>target element</div>

  • afterbegin:<div> 插入 HTML target element</div>

  • beforeend:<div>target element 插入 HTML </div>

  • afterend:<div>target element</div> 插入 HTML

• 它不会像innerHTML那样覆盖内容。

缺点：

• 很冗长。

演示

var movieDescription = `
<hr>
<div>Title: ${moviesData[i].title}</div> 
<div>Year: ${moviesData[i].year}</div> 
<div>Genre: ${moviesData[i].genre}</div> 
<div>Summary: ${moviesData[i].summary}</div>
<hr>`;

 document.querySelector('.dock').innerHTML = movieDescription;

var dock = document.querySelector('.dock');
var i;
var moviesData = [{
  title: 'Pulp Fiction',
  year: '1994',
  genre: 'Drama-Crime',
  summary: "You will know , my name is the Lord, when I lay my vengance upon thee!"
}, {
  title: 'Reservoir Dogs',
  year: '1992',
  genre: 'Drama-Crime',
  summary: "Clowns to the left of me, jokers to the right! Here I am stuck in the middle with you"
}];

for (i = 0; i < moviesData.length; i++) {

  var movieDescription = `
<hr>
<div>Title: ${moviesData[i].title}</div> 
<div>Year: ${moviesData[i].year}</div> 
<div>Genre: ${moviesData[i].genre}</div> 
<div>Summary: ${moviesData[i].summary}</div>
<hr>`;

  dock.insertAdjacentHTML('beforeend', movieDescription);
}