通过vanilla javascript生成HTML标记

一些站点使用以下JavaScript行来构建站点：

document.write('<link rel="stylesheet" type="text/css" href="' + staticpath +     
    'resources/css/mobile-android.css" /><div class="overlay"></div>
     <div class="new-folder-popup" id="message"><div class="new-folder-popup-bg"><div 
    class="new-folder-header">MEGA for Android</div><div class="new-folder-main-bg">
    <div class="new-folder-descr">Do you want to install the latest<br/> version of the MEGA app for Android?</div><a class="new-folder-input left-b/>');

document.write（'
Android的MEGA
您想安装最新版本的Android MEGA应用程序吗？关于在JS中使用HTML

var div = document.createElement('div');
    div.setAttribute('id', 'mydiv');

document.body.appendChild(div);

这将创建一个div，给它一个ID并将其附加到正文中。这是在JS中使用html的更可靠的方法。您还可以加载（或预加载）和图像，如：

var img = new Image();
    img.src = "path to my file";

document.body.appendChild(img);

希望这有帮助，请随时问我你有什么问题。
你不应该使用
文档。写
。你会在网上找到大量反对它的文章以及原因。这里我将向你展示3种通过JavaScript生成HTML的方法，我个人使用这三种方法

方法1：
这种方法很简单，效果也很好，但在JS代码中键入HTML时很容易出错。此外，它将HTML和JS混合在一起，这不是一种很好的做法。尽管如此，它很有效，我在简单的项目中使用这种方法

请注意
${some_var}
语法。我刚刚提出了它，它不是特定于JavaScript的。我们将使用JavaScript的
replace（）
方法和一个简单的正则表达式用实际值替换这些占位符

// A function that returns an HTML string - a.k.a. a Template
function getHtml() {
  var html = '<div class="entry">';

  html += '<h3 class="title">${title}</h3>';

  html += '<time>';
  html += '<span class="month">${month}</span> ';
  html += '<span class="day">${day}</span>, ';
  html += '<span class="year">${year}</span>';
  html += '</time></div>';

  return html;
}


// Helper function that takes an HTML string & an object to use for
// "binding" its properties to the HTML template above.
function parseTemplate(str, data) {
   return str.replace(/\$\{(\w+)\}/gi, function(match, parensMatch) {
     if (data[parensMatch] !== undefined) {
       return data[parensMatch];
     }

     return match;
   });
 }


 // Now parse the template
 parseTemplate(getHtml(), {
   title: 'Lorem Ipsum',
   month: 'January',
   day: '16',
   year: '2015'
 });



方法3：
通过这种方法，我们使用了一个模板系统，比如handlebar（）。当您希望在项目中有很多模板时，它工作得很好。与下面的脚本标记不同，这些模板实际上也可以预编译为JavaScript函数，这是强烈推荐的

<!-- An HTML template made out of script tags inside your page. -->
<script id="entry-template" type="text/x-handlebars-template">
  <div class="entry">
    <h1>{{title}}</h1>
    <div class="body">
      {{body}}
    </div>
  </div>
</script>

html变量现在包含以下内容，您可以使用类似
innerHTML
的内容将其插入页面：

<div class="entry">
  <h1>My New Post</h1>
  <div class="body">
    This is my first post!
  </div>
</div>


我的新职位
这是我的第一篇帖子！
我怀疑很多人写这样的代码是不是很专业。
document.write
是一种不好的做法，代码中的HTML字符串也是如此。看看DOM。不幸的是，这是不可能知道的。有些脚本会生成这种类型的代码，但没有什么可以阻止开发人员手工操作。最好的做法不会是o使用DOM方法，如感谢您的回答。我正在使用angularjs开发web应用程序，只是询问它是否生成。您可以使用JS模板文本：
<!-- An HTML template made out of script tags inside your page. -->
<script id="entry-template" type="text/x-handlebars-template">
  <div class="entry">
    <h1>{{title}}</h1>
    <div class="body">
      {{body}}
    </div>
  </div>
</script>

// Get the HTML source
var source = document.getElementById('entry-template').innerHTML;

// Compile it - `template` here is a function similar to `getHtml()` from the first example
var template = Handlebars.compile(source);

// Provide some data to the template.
var html = template({title: "My New Post", body: "This is my first post!"});

<div class="entry">
  <h1>My New Post</h1>
  <div class="body">
    This is my first post!
  </div>
</div>