Question

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

}

我该怎么做？

Answer 1

您可以使用document.createElement创建元素。创建后，您可以添加属性。如果希望元素显示在文档中，则必须插入到文档的DOM树中。尝试使用此代码：

var body = document.getElementsByTagName('body')[0],
    newdiv = document.createElement('div');   //create a div
    newdiv.id = 'newid';                      //add an id
    body.appendChild(newdiv);                 //append to the doc.body
    body.insertBefore(newdiv,body.firstChild) //OR insert it

如果它只是html你想要这是一种方法：

function createmyElements(id1,id2,id3){
   return [
           '<a href="some link" id="',
            id1,
           '">linktxt</a>',
           '<div id="" ',
            id2,
           '"></div>',
           '<someElement id="',
            id3,
           '"></someElement>'
          ].join('\n');
}

另一种方法是创建一个div而不将其注入到DOM树中，并使用DOM方法向其中添加元素。这是一个创建1个元素的函数

function createElementHtml(id,tagname){
  var containerdiv = document.createElement('div'),
      nwtag = document.createElement(tagname);
  nwtag.id = id;
  containerdiv.appendChild(nwtag);
  return containerdiv.innerHTML;
}
//usage
createElementHtml('id1','div'); //=> <div id="id1"></div>

Answer 2

您可以将html构造为一个变量，如

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

然后你返回变量html

return html;

Answer 3

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，直到最后一刻。

否则它会强制浏览器为每个元素进行更新，这有时可能会让人感到非常痛苦。

Answer 4

以下是将html-page（静态）转换为基于javascript的html-page（动态）的简单说明。

让我们说，你有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以验证网页（动态但是在线下）。

more info

Answer 5

如果要重复执行此操作（动态创建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年的问题，而是未来的访客。希望有帮助。}

使用Javascript动态创建HTML元素？

5 个答案: