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

【问题标题】：HTML elements in template strings in JSJS中模板字符串中的HTML元素
【发布时间】：2018-06-05 21:42:54
【问题描述】：

我有问题，在我的模板字符串添加HTML元素。我想在我的<li>元素添加新的生产线，但<br>这样解释的字符串。

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

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

【问题讨论】：

您可以创建一个TextNode，所以这是正确的行为。使用@如果987654326 @要解析的字符串。 SPAN>
为什么创建时，你会想到什么不同一个 “文本节点” i> SPAN>
你应该看看diffhtml。它有一些非常漂亮的函数做到这一点，吨其他的东西用的模板标签。 SPAN>

标签： javascript html ecmascript-6

【解决方案1】：

如您所知，<br> 是 HTML 而不是文本。因此，您需要解析 Template Literal 才能正确呈现换行符。最常见的方法是使用属性.innerHTML，尽管我已经阅读了大量posts 和blogs 关于它的糟糕程度，但我从来没有遇到过问题。在这个例子中，我们使用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 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);
}

&lt;div class='dock'&gt;&lt;/div&gt;

【讨论】：

【解决方案2】：

一个文本节点包含……嗯……文本。它不包含其他 html 元素，因此当您创建一个元素时，它会将<br> 解释为文本并按原样显示。

您想要的是 TextNode 和 HTMLBRElement 的集合。

const movieDescription = [
    document.createTextNode(moviesData[i].title),
    document.createElement('br'),
    document.createTextNode(moviesData[i].year),
    document.createElement('br'),
    document.createTextNode(moviesData[i].genre),
    document.createElement('br'),
    document.createTextNode(moviesData[i].summary)
];

这样做很尴尬。相反，您可能希望在要添加此描述的元素上使用 Element.innerHTML。

const html = `${moviesData[i].title} <br> ${moviesData[i].year} <br> ${moviesData[i].genre} <br>${moviesData[i].summary}`;
document.querySelector('.my-movie-description').innerHTML = html;

存在一种类似的方法来将单个 TextNode 添加到元素。这是Element.innerText。

【讨论】：

【解决方案3】：

我已经编写了一个 html 模板引擎来在浏览器上呈现动态数据。

Codepen example

var moviesData = [];
for(var i = 0; i < 10; i++){
   moviesData.push( {
      "title" : "title " + i,
      "year" : 2000 + i,
      "genre" : "action",
      "summary" : "summary " + i
   });
}

body {
  background-color: #a3d5d3;
}
.movie {
  margin: 0.5em 1em ;
  padding : 0.2em 0.5em;
  border: 1px solid;
}

<div jstl-autorun jstl-foreach="${moviesData}" jstl-foreach-var="movieData">
   <div class="movie">
      ${movieData.title}
      <br/>
      ${movieData.year}
      <br/>
      ${movieData.genre}
      <br/>
      ${movieData.summary}
   </div>      
</div>

here is the link for the template engine

希望对你有用。

【讨论】：