使用以下语法时，不必为每种类型的属性和事件费力地搜索解决方法：
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>' );
body 元素上不起作用，但在任何其他元素上都可以正常工作。 - Phill<body> 上运行。事实上，通过控制台将诸如样式表等内容注入到网页中的标准方法是在 <body> 上运行它。您遇到了什么问题？ - Šime Vidas<body>未定义，则所有其他元素也将未定义，因此这可能不是Phill的问题。 - Šime Vidasvar 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中；这就是旧式JavaScript示例中使用innerHTML的原因。BODY元素的innerHTML被插入了新的HTML，并在其前面添加。我们并没有真正改变BODY内部现有的HTML。
我将重写上述示例以澄清这一点：
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>');
document.getElementsByTagName('body')[0] 的确可以被 document.body 替代，说得好。然而，如果你想将新的 HTML 添加到另一个已存在的元素之前或之后，而不是添加到 BODY 中，你就必须使用 document.getElementById() 和/或 document.getElementsByTagName()；这就是为什么我在示例中使用它的原因。 - Mathias Bynens正如其他人所说，方便的jQuery prepend功能可以模拟：
var html = '<div>Hello prepended</div>';
document.body.innerHTML = html + document.body.innerHTML;
虽然有些人认为最好不要“搞乱”innerHTML，但在许多用例中它是可靠的，只要你知道这个：
如果一个
<div>、<span>或<noembed>节点有一个包含字符(&)、(<)或(>)的子文本节点，innerHTML将分别返回这些字符：&、<和>。使用Node.textContent获取这些文本节点内容的正确副本。
https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML
或者：
var html = '<div>Hello prepended</div>';
document.body.insertAdjacentHTML('afterbegin', html)
insertAdjacentHTML 可能是一个不错的替代方案：https://developer.mozilla.org/zh-CN/docs/Web/API/Element/insertAdjacentHTML
textContent，这是将完整HTML从一个节点复制到另一个节点的解决方案，所以我给你点赞了 :) - xeruf var htmlCode = '<ul class=\'menu-countries\'><li
class=\'item\'><img src=\'au.png\'></img><span>Australia </span></li><li
class=\'item\'><img src=\'br.png\'> </img><span>Brazil</span></li><li
class=\'item\'> <img src=\'ca.png\'></img><span>Canada</span></li></ul>';
var element = document.getElementById('myTag');
element.innerHTML = htmlCode;
你可以编写更易于理解的结构
var jtag = $j.ul({
class: 'menu-countries',
child: [
$j.li({ class: 'item', child: [
$j.img({ src: 'au.png' }),
$j.span({ child: 'Australia' })
]}),
$j.li({ class: 'item', child: [
$j.img({ src: 'br.png' }),
$j.span({ child: 'Brazil' })
]}),
$j.li({ class: 'item', child: [
$j.img({ src: 'ca.png' }),
$j.span({ child: 'Canada' })
]})
]
});
var htmlCode = jtag.html();
var element = document.getElementById('myTag');
element.innerHTML = htmlCode;