需要一个更好的解决方案来从JavaScript文件附加HTML

need a better solution to append html from javascript file

本文关键字：JavaScript 文件 HTML 解决方案 更好 一个      更新时间：2023-09-26
for (i = 0; i < events.length; i++) {
   left_pos = (event_col[i] * xfactor * 100);
        //jquery part need cleaner
   $('.contain_textDiv')
       .append('<div class="sample_box1" style="margin-left:' + left_pos + '%;' + 'margin-top:' + Math.round(events[i].start) + 'px; width:' + Math.floor(95 * xfactor) + '%;' + 'position: absolute; height:' + Math.round(events[i].end - events[i].start) + 'px;"><div class="sample_boxHeader">Sample Layout</div><div class="sample_box_grayText">Sample Location</div></div>');
     }

这部分 JavaScript 代码将通过循环来更改当前的 html 样式并添加 

<div class="sample"></div>

和 

<div class="sample2"></div>

在我的 HTML 文件中，已经存在一个<div class="sample"></div>

有人有更好的解决方案来清理这部分代码吗？我真的很感激你的帮助！

不要将 DOM 元素追加为字符串，而是在 jQuery 中创建一个新元素并附加它：

var newEl = $('<div>').addClass("sample_box1").css({
    'margin-left': left_pos+"%",
    'margin-top': Math.round(events[i].start),
    width: Math.floor(95 * xfactor)+'%',
    //etc etc
});
$('.contain_textDiv').append(newEl);

有几种方法可以清理它。 一种方法是缩进代码。 你可以做的另一件事是使用 jQuery 的方法设置样式属性值(这样你就不必担心转义等等(。

$('.contain_textDiv')
  .append(
    $('<div>')
      .addClass('sample_box1')
      .css({
        'margin-left': left_post + '%',
        'margin-top': Math.round(events[i].start) + 'px',
        width: Math.floor(95 * xfactor) + '%',
        height: Math.round(events[i].end - events[i].start) + 'px'
      })
      .append([
        $('<div class="sample_boxHeader">Sample Layout</div>'),
        $('<div class="sample_box_grayText">Sample Location</div>')
      ])
  )

(代码未经测试，但应该可以帮助您入门。

要考虑的另一件事(通常是最好的选择(是使用 JavaScript 模板引擎。 有很多可供选择。 我发现 Swig 非常高效且轻量级，当您只有基本的模板需求时，这很好。

我认为布伦南的回答是一个很好的干净方法。但是，如果出于某种原因您更喜欢将其构建为字符串，那么这里有一个我喜欢不时使用的"像 String Builder 一样使用数组"黑客的示例：

for (i = 0; i < events.length; i++) {
    left_pos = (event_col[i] * xfactor * 100);
    var sb = [];
    sb.push('<div class="sample_box1" ');
    sb.push(  'style="margin-left:' + left_pos + '%;');
    sb.push(  'margin-top:' + Math.round(events[i].start) + 'px; ');
    sb.push(  'width:' + Math.floor(95 * xfactor) + '%;');
    sb.push(  'position: absolute; ');
    sb.push(  'height:' + Math.round(events[i].end - events[i].start) + 'px;">');
    sb.push('<div class="sample_boxHeader">Sample Layout</div>');
    sb.push('<div class="sample_box_grayText">Sample Location</div>');
    sb.push('</div>');
    console.log(sb.join(''));
    $('.contain_textDiv').append(sb.join(''));
}
相关文章：