动态元素创作 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



}


我怎样才能做到这一点？
2021-03-20 添加评论
分享

没有找到相关结果

    已邀请:

    风见雨下

    赞同来自:

    您可以创建一个项目
    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>
    2021-03-20 0 0
    分享

    龙天

    赞同来自:

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

    否则，它会导致浏览器更新每个元素，有时可以是真正的疼痛。
    2021-03-20 0 0
    分享

    卫东

    赞同来自:

    你可以建立 html 例如，作为一个变量中的字符串


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


    然后你返回变量 html


    return html;
    2021-03-21 0 0
    分享

    诸葛浮云

    赞同来自:

    这是一个简单的例证，用于转换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>
    2021-03-21 0 0
    分享

    涵秋

    赞同来自:

    如果你反复这样做 /动态创建 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年的问题，而是为了将来的访客。 我希望它会有所帮助。
    2021-03-21 0 0
    分享
    为什么被折叠? 0 个回复被折叠

    要回复问题请先登录或注册

    Copyright © 2023, All Rights Reserved