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

Posted 2023-05-07

【中文标题】JS中模板字符串中的HTML元素

【英文标题】：HTML elements in template strings in JS

【发布时间】：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>

【参考方案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);

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

【参考方案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

希望对你有用。