javascript - 需要一个更好的解决方案来从 javascript 文件附加 html

<分区>

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

关于javascript - 需要一个更好的解决方案来从 javascript 文件附加 html，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26416987/

上一篇：javascript - 如何测试像 modernizr.js 这样的 css 属性

下一篇：javascript - 在 JavaScript 中获取名为颜色的 CSS/HTML 的 RGB 值

javascript - 寻找一行 JavaScript Regex 替换

javascript - 如何禁用chrome中的保存密码提示

javascript - AJAX 和 JSON 错误处理

Javascript 数组转换为 JSON 对象而不是数组

html - h1 和跨度

javascript - 将外部 CSS 作为内联样式应用于 HTML 节点(vanilla Javascript/Coffeescript)

php - GET 请求错误，Uncaught SyntaxError : Unexpected identifier OPTIONS

javascript - iframe 调整大小

javascript - 如何在 stackblitz 中包含 javascript url 依赖项？