动态元素创作 HTML 使用 Javascript?

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

}


我怎样才能做到这一点?
已邀请:

风见雨下

赞同来自:

您可以创建一个项目
document.createElement

. 创建后,您可以添加属性。 如果希望在文档中显示该项目,则必须将其插入DOM 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>

龙天

赞同来自:

Html:


<div id="main"></div>


JavaScript:


var tree = document.createDocumentFragment//;
var link = document.createElement/"a"/;
link.setAttribute/"id", "id1"/;
link.setAttribute/"href", "[url=http://site.com"/;]http://site.com"/;[/url]
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-page /静态的/ 在JavaScript页面中 /动态的/.

假设您有一个HTML页面 " index.html " /打电话 index_static.html 这里/.


index_static.html



HTML
<html>
<head>
<title>Test</title>
</head>
<body>
<h1> Hello !!! </h1>
</body>
</html>


您可以在浏览器中打开此文件以查看所需的输出。

现在让我们创造等价物 javascript 为了这。
使用
http://www.accessify.com/tools ... rtor/
, 生成一个来源 javascript /插入上面的文件源 html/. 因此,它遵循这一点:


dynamic.js



document.write/"HTML"/;
document.write/"<html>"/;
document.write/" <head>"/;
document.write/" <title>Test&lt;\/title&gt;"/;
document.write/" &lt;\/head&gt;"/;
document.write/" <body>"/;
document.write/" <h1> Hello !!! &lt;\/h1&gt;"/;
document.write/" &lt;\/body&gt;"/;
document.write/"&lt;\/html&gt;"/;


现在你的动态版 static_index.html 它如下所示:


index_dynamic.html



<script language="JavaScript" src="dynamic.js"></script>


打开 index_dynamic.html 在浏览器中查看网页 /虽然是动态的, down-the-line/.

https://www.codeproject.com/Ar ... nners
</h1></body></title></head></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//

, 访问
https://github.com/akinuri/element.js
.

我添加了这个答案而不是8年的问题,而是为了将来的访客。 我希望它会有所帮助。

要回复问题请先登录注册