javascript - 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 不是文本。因此，您需要解析模板文字才能正确呈现换行符。最常见的方法是使用属性 .innerHTML ，虽然我读了很多 posts和 blogs关于它有多糟糕，我从来没有遇到过问题。在此示例中，我们使用 insertAdjacentHTML() (注意模板文字有 <div> 和 <hr> ):

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 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);
}

<div class='dock'></div>