使用Javascript动态创建HTML元素？

问题描述 投票：0回答：6

我想动态创建一些 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

}

我该怎么做？

javascript html dom
6个回答
32
投票

[编辑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>&hellip;`});
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>`,
        className: `xyz`, } );

const prepareHtml4Reporting = html => 
  html.replace(/</g, `&lt;`)
    .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的机制。

8
投票

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。

否则它会强制浏览器更新每个元素，有时这看起来真的很痛苦。

4
投票

如果您重复执行此操作（动态创建 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"}),
]);

您可以使用 

div.outerHTML
获取 HTML，或者您也可以将其附加到您想要的任何位置。

要了解有关 

elem()
的更多信息，请访问 element.js (GitHub)。

我添加这个答案不是为了这个8年前的问题，而是为了未来的访客。希望有帮助。

1
投票

您可以将 html 构造为一个变量中的字符串

var html = "";
html += "<a id='" + id1 +"'>link</a>";
html += "<div id='" + id1 +"'>div</div>";
// ... and so on

然后返回变量 html

return html;
1
投票

更好的方法是导入 ElementsJS 并引用其中的每个元素。

var root = document.getElementById("root");
var elementdiv = create_element('div',{'class':'divcss'}, root, null);
  create_element('h1',{'class':'hellocss'}, elementdiv, "Hello World");
.hellocss {
  color : red;
  }
  
.divcss {
  background-color : blue;
  height: 100px;
  position: absolute;
  
  }
<script src="https://elementsjs.blob.core.windows.net/public/create-elements.js"></script>
<body id="root"></body>

更多详情请参考https://github.com/divyamshu/Elements-JS 详细记录了示例。

0
投票

这是将 html 页面（静态）转换为基于 javascript 的 html 页面（动态）的简单说明。

假设您的 html 页面为“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以验证网页（虽然是动态的，但实际上是动态的）。

更多信息

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.