我想动态创建一些 HTML 元素（3 个 html 元素），然后将此 html 代码作为变量中的字符串返回。我不想将以下函数中的 HTML 代码写入某个 div，但是，我想在 var 中返回它。
function createMyElements(id1,id2,id3){
//create anchor with id1
//create div with id 2
//create xyz with id3
//now return the html code of above created just now
}
我怎样才能做到这一点？
[编辑 2021/10 ] 这个答案现在已经超过 10 年了。这是一个包含多种创建和/或注入元素的方法的片段。所问问题的答案（创建一些元素并检索它们的 html 代码）可以在@代码段的底部找到。
// The classic createElement
// -------------------------
// create a paragraph element using document.createElement
const elem = document.createElement(`p`);
elem.id = `myBrandnewDiv1`;
// put in some text
elem.appendChild(document.createTextNode(`My brand new div #1`));
// append some html (for demo, preferrably don't use innerHTML)
elem.innerHTML += ` => created using
<code>document.createElement</code>`;
// append a new paragraph within #myBrandNewDiv1
const nested = elem.appendChild(document.createElement(`p`));
nested.classList.add(`nested`);
// add some text to that
nested.textContent = `I am nested!`;
// the elements are still in memory, now add the
// whole enchillada to the document
document.body.appendChild(elem);
// insertAdjacentHTML
// ------------------
// nest an element within the nested div
nested.insertAdjacentHTML(`afterbegin`,
`<div id="nestedWithin#nested">
This text will appear <i>above</i> the text of
my parent, that being div#nested.
Someone had the nerve to insert me using
<code>insertAdjacentHTML</code>
</div>`);
// Object.assign
// -------------
// Use Object.assign to create an element and
// assign properties/html to it in one go
const newElem = Object.assign(
document.createElement(`div`),
{ id: `myBrandnewDiv2`,
innerHTML: `div#myBrandnewDiv2 signing in.
I was <i>assigned</i> using <code>Object.assign</code>…`});
document.body.appendChild(newElem);
// insertAdjacentElement combined with Object.assign
// -------------------------------------------------
// use the above technique combined with insertAdjacentElement
newElem.insertAdjacentElement(
`beforeend`,
Object.assign(document.createElement(`span`),
{ id: `myBrandnewnested2_nested`,
innerHTML: `<br>Me too! And appended I was
with <code>insertAdjacentElement</code>` })
);
// createDocumentFragment
// ----------------------
// Use a document fragment to create/inject html
const fragment = document.createDocumentFragment();
const mdnLnk = `https://developer.mozilla.org/en-US/` +
`docs/Web/API/Document/createDocumentFragment`;
fragment.appendChild(
Object.assign(
document.createElement(`p`),
{innerHTML: `Regards from <code>createDocumentFragment</code>
(see <a href="${mdnLnk}">MDN</a>)`})
);
document.querySelector(`#myBrandnewDiv2`).appendChild(fragment);
// Create, but don't inject
// ------------------------
const virtual = Object.assign(
document.createElement(`p`),
{ innerHTML: `
<a href="#id1">id1</a>
<div id="id2">Hi!</div>
<p id="id3">Hi 2!</p>`,
classList: [`xyz`], } );
const prepareHtml4Reporting = html =>
html.replace(/</g, `<`)
.replace(/\n\s+/g, `\n`)
.replace(/\n\n/g, `\n`);
document.body.insertAdjacentHTML(
`beforeend`,
`<h3>html only</h3><pre>${
prepareHtml4Reporting(virtual.innerHTML)}</pre>`);body {
font: normal 12px/15px verdana, arial, sans-serif;
margin: 2rem;
}
code {
background-color: #eee;
}
.nested {
margin-left: 0.7rem;
max-width: 450px;
padding: 5px;
border: 1px solid #ccc;
}我在这个库中使用了其中的一些方法（请参阅/src/DOM.js参考资料），以及在注入之前清理 html 的机制。
网址：
<div id="main"></div>
JavaScript：
var tree = document.createDocumentFragment();
var link = document.createElement("a");
link.setAttribute("id", "id1");
link.setAttribute("href", "http://site.com");
link.appendChild(document.createTextNode("linkText"));
var div = document.createElement("div");
div.setAttribute("id", "id2");
div.appendChild(document.createTextNode("divText"));
tree.appendChild(link);
tree.appendChild(div);
document.getElementById("main").appendChild(tree);
使用 documentFragment 而不是直接添加元素的主要原因是执行速度。
在这个大小上没关系，但是当您开始添加数百个元素时，您会很高兴首先在内存中进行 :-)
使用 documentFragment，您可以在内存中构建一棵完整的 DOM 元素树，并且直到最后一刻才会影响浏览器 DOM。
否则它会强制浏览器为每个元素更新，这有时会很痛苦。
您可以将 html 构造为一个变量中的字符串，例如
var html = "";
html += "<a id='" + id1 +"'>link</a>";
html += "<div id='" + id1 +"'>div</div>";
// ... and so on
然后你返回变量 html
return html;
如果您重复执行此操作（动态创建 HTML），您可能需要使用更通用的方法。
如果要创建三个不相关的元素，可以执行以下操作：
var anchor = elem("a", {"id":"id1"});
var div = elem("div", {"id":"id2"});
var xyz = elem("div", {"id":"id3"});
现在，您拥有三个元素。如果您想获取这些的 HTML（作为字符串），只需执行以下操作：
var html = anchor.outerHTML + div.outerHTML + xyz.outerHTML;
如果你想在一个元素中包含这三个（比如 div），请执行以下操作：
var div = elem("div", null, [
elem("a", {"id":"id1"}),
elem("div", {"id":"id2"}),
elem("div", {"id":"id3"}),
]);
您可以使用 获取 HTML div.outerHTML，也可以将其附加到您想要的任何位置。
要了解更多信息elem()，请访问element.js (GitHub)。
我不是为 8 岁的问题添加这个答案，而是为未来的访问者添加这个答案。希望能帮助到你。
这是将 html 页面（静态）转换为基于 javascript 的 html 页面（动态）的简单说明。
让我们说，你有 html-page 作为“index.html”（在这里调用 index_static.html）。
index_static.html
<!DOCTYPE HTML>
<html>
<head>
<title>Test</title>
</head>
<body>
<h1> Hello !!! </h1>
</body>
</html>
您可以在浏览器中打开此文件，以查看所需的输出。
现在，让我们创建一个与此等效的 javascript。使用online-tool生成 javascript 源代码（通过将上面的 html 文件源粘贴到其中）。因此，它如下：
dynamic.js
document.write("<!DOCTYPE HTML>");
document.write("<html>");
document.write(" <head>");
document.write(" <title>Test<\/title>");
document.write(" <\/head>");
document.write(" <body>");
document.write(" <h1> Hello !!! <\/h1>");
document.write(" <\/body>");
document.write("<\/html>");
现在，您的 static_index.html 动态版本将如下所示：
index_dynamic.html
<script language="JavaScript" src="dynamic.js"></script>
在浏览器上打开 index_dynamic.html 以验证网页（虽然是动态的，下线）。