JS创建HTML控件并动态生成页面的写法

JS可以通过以下几种方式创建HTML控件并动态生成页面：

1. 使用document.createElement()方法创建元素节点，并使用appendChild()方法将其添加到DOM树中。

// 创建一个div元素
var div = document.createElement('div');

// 设置div的文本内容
div.innerHTML = 'Hello World!';

// 将div添加到body中
document.body.appendChild(div);

2. 使用innerHTML属性动态生成页面，可以通过字符串拼接的方式生成HTML代码，然后将其赋值给innerHTML属性。

// 生成一个ul列表
var ul = '<ul>';

for (var i = 1; i <= 10; i++) {
  ul += '<li>Item ' + i + '</li>';
}

ul += '</ul>';

// 将ul添加到body中
document.body.innerHTML = ul;

3. 使用模板字符串（template literals）动态生成页面，可以使用反引号（`）来包裹HTML代码，然后将其赋值给innerHTML属性。

// 生成一个ul列表
var ul = `<ul>`;

for (var i = 1; i <= 10; i++) {
  ul += `<li>Item ${i}</li>`;
}

ul += `</ul>`;

// 将ul添加到body中
document.body.innerHTML = ul;

以上三种方式都可以实现动态生成HTML页面的效果，具体使用哪种方式取决于个人习惯和需求。