微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

使用Javascript动态创建HTML元素?

我想动态创建一些 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树中.尝试使用此代码
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,id3){
   return [
           '<a href="some link" id="',id1,'">linktxt</a>','<div id="" ','"></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>

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐