使用动态html填充元素

问题描述：

因此，我正在构建一个歌曲队列，该队列会自动更新函数调用中的内容。此函数调用为php脚本创建ajax请求，该脚本返回队列中歌曲的json数据（图片url，歌曲标题，歌曲作者）。然后，我想动态地将我的ul与基于json数据中返回的每个这样的歌曲进行填充。使用动态html填充元素

当前结构是一个包含所有其他html的ul的ul。

像这样：

<ul> 
    <li> 
     <div id="thumbnail" style="background: url('URL HERE'); background-size: 100% 100%"></div> 
     <div id="songdetails"> 
      <div id="title">TITLE HERE</div> 
      <div id="author">AUTHOR HERE</div> 
     </div> 
    </li> 

    <li> 
     <div id="thumbnail" style="background: url('URL HERE'); background-size: 100% 100%"></div> 
     <div id="songdetails"> 
      <div id="title">TITLE HERE</div> 
      <div id="author">AUTHOR HERE</div> 
     </div> 
    </li> 

    <li> 
     <div id="thumbnail" style="background: url('URL HERE'); background-size: 100% 100%"></div> 
     <div id="songdetails"> 
      <div id="title">TITLE HERE</div> 
      <div id="author">AUTHOR HERE</div> 
     </div> 
    </li> 
</ul>

我的问题是，从我的计算器发现其他网站大多数人认为是这样的：

var ul = document.getElementById('ul'); 

ul.appendChild(child);

我这个问题是，我想最大限度地减少我使用的代码数量，使代码简化和可读，并且不希望每个孩子和他们的孩子都有变量。

有没有更高效的方法来实现这个目标？

也许使用模板系统。最简单的一个：https://mustache.github.io/ – AlFra

你是“试图尽量减少[你]使用的好处”！ –

如果你将发布的代码提取你想添加到'ul'的数据，它肯定会有帮助。您可以在'php'文件中轻松格式化包含所有'li'元素的整个'html'，然后一次传递'html'字符串。 – Franco

答

这个jQuery解决方案：

<ul id="container" />

和Javascript：

// Assuming the data comes in like this: 
/* 
[ 
    {url: 'http://www.example/com', title: 'Title Goes Here', author: 'Author here'}, 
    {url: ... 
] 
*/ 
$.getJSON('url.php', function(data) { 
    $('#container').empty().append(data.map(function(x) { 
     return ' 
      <li> 
       <div id="thumbnail" style="background: url(\'' + x.url + '\'); background-size: 100% 100%"></div> 
       <div id="songdetails"> 
        <div id="title">' + x.title + '</div> 
        <div id="author">' + x.author + '</div> 
       </div> 
      </li> 
     '); 
    }); 
});

答

我倾向于使用模板来做到这一点。我创建了一个简单的模板引擎，做基本的字符串替换这样

function renderTemplate(str, obj) { 
     var i, r, val, outStr=str; 

     for(i in obj) { 
      if (obj.hasOwnProperty(i)) { 
       r = new RegExp("{" + i + "}", "g"); 
       val = obj[i] || "&nbsp;"; 
       val = val.toString().replace(/^null$/, "&nbsp;"); 
       outStr = outStr.replace(r, val); 
      } 
     } 

     return outStr; 
    }

然后，我将创建一个模板字符串这样

var template = "Hello <span class=\"name\">{name}</span> you are {age} years old";

由于包含名字和年龄的对象，你可以渲染模板的HTML这样

var html=renderTemplate(template, {name: "Alice", age: 38});

在第二参数传递的对象的密钥搜索中包裹在大括号中的模板（“{”和“}”）

最后，我创建了一个新的元素，这个字符串设定的innerHTML并追加到我的文档

var newLI = document.createElement("li"); 
newLI.innerHTML = html; 
ulNode.appendChild(newLI);

这renderTemplate是早期的创作我的，我必须在代码安葬新版本的更多容错，但这是一个很好的例子。

注意：在野外还有其他的模板解决方案。这是我家种的。正如你对OP的评论所说，小胡子就是这样。

使用动态html填充元素

相关推荐