使用以下语法时，无需为每种类型的属性和事件繁琐地搜索解决方法：
elem = document.createElement("div");
elem.id = 'myID';
elem.innerHTML = ' my Text '
document.body.insertBefore(elem,document.body.childNodes[0]);
有没有办法可以将整个 HTML 元素声明为字符串？喜欢：
elem = document.createElement("<div id='myID'> my Text </div>");
document.body.insertBefore(elem,document.body.childNodes[0]);
innerHTML创建一个片段然后插入它可能会更好，而不是直接弄乱它：
function create(htmlStr) {
var frag = document.createDocumentFragment(),
temp = document.createElement('div');
temp.innerHTML = htmlStr;
while (temp.firstChild) {
frag.appendChild(temp.firstChild);
}
return frag;
}
var fragment = create('<div>Hello!</div><p>...</p>');
// You can use native DOM methods to insert the fragment:
document.body.insertBefore(fragment, document.body.childNodes[0]);
好处：
即使innerHTML在函数内使用，它也发生在 DOM 之外，所以它比你想象的要快得多......
你要这个
document.body.insertAdjacentHTML( 'afterbegin', '<div id="myID">...</div>' );
var element = document.getElementById("one");
var newElement = '<div id="two">two</div>'
element.insertAdjacentHTML( 'afterend', newElement )
// new DOM structure: <div id="one">one</div><div id="two">two</div>
position是相对于您要插入的元素的位置：
'beforebegin' 在元素本身之前
'afterbegin' 就在元素内部，在它的第一个子元素之前
'beforeend' 就在元素内部，在它的最后一个子元素之后
'afterend' 在元素本身之后
在老式 JavaScript 中，你可以这样做：
document.body.innerHTML = '<p id="foo">Some HTML</p>' + document.body.innerHTML;
回应你的评论：
[...] 我感兴趣的是声明一个新元素的属性和事件的来源，而不是
innerHTML一个元素的来源。
不过，您需要将新的 HTML 注入到 DOM 中；这就是为什么innerHTML在老式 JavaScript 示例中使用的原因。在innerHTML该的BODY元素被换成了新的HTML。我们并没有真正触及BODY.
我将重写上述示例以阐明这一点：
var newElement = '<p id="foo">This is some dynamically added HTML. Yay!</p>';
var bodyElement = document.body;
bodyElement.innerHTML = newElement + bodyElement.innerHTML;
// note that += cannot be used here; this would result in 'NaN'
使用 JavaScript 框架将使此代码不那么冗长并提高可读性。例如，jQuery 允许您执行以下操作：
$('body').prepend('<p id="foo">Some HTML</p>');
据我所知，公平地说，这是相当新的和有限的，此技术的唯一潜在问题是您无法动态创建某些表格元素。
我通过将“模板”元素添加到隐藏的 DIV，然后使用 cloneNode(true) 创建一个克隆并根据需要附加它来使用表单进行模板化。请注意，您确实需要确保根据需要重新分配 ID 以防止重复。