document的高级篇中提供了节点操作的函数，具体包括：获取节点，改变节点，删除节点，替换节点，创建节点，添加节点，克隆节点等函数。我们可以利用这些函数动态改变html的节点。
1、JavaScript
&script type="text/javascript"&
function test1(){//对个节点的ID相同时候的情况
var myhref = document.getElementById('same');
window.alert(myhref.innerText);
function test2() {//输出节点的值
var hobbies = document.getElementsByName("hobby");
for (var i = 0; i & hobbies. i++) {
if (hobbies[i].checked) {
window.alert("你的爱好是：" + hobbies[i].value);
function getN() {//通过标签获取标签对应的值
var myObj = document.getElementsByTagName('input');
for (var i = 0; i & myObj. i++) {
window.alert(myObj[i].value);
function addtags() {//动态添加超链接节点&a&&/a&
//(1)创建元素&a&
var myElement = document.createElement("a")
//(2)给元素添加必要的标示信息
myElement.href = "";
myElement.innerText = "连接到新浪";
myElement.style.left = "200px";
myElement.style.top = "300px";
myElement.style.position = "absolute";
//添加到document.body
document.body.appendChild(myElement);
var i = 1;
function addinput() {//添加input元素
var myElement = document.createElement('input');
myElement.type = "button";
myElement.value = "奔跑吧";
//myElement.id="i++";
myElement.id = "id1";
document.getElementById("div1").appendChild(myElement);
function deleteinput() {
//删除一个元素的前提是要知道其父元素是什么。此方法不是很灵活
//document.getElementById("div1").removeChild(document.getElementById('id1'));
document.getElementById('id1').parentNode.removeChild(document
.getElementById('id1'));
2.body体中的调用
&a id="same" href=""&搜狐&/a&
&a id="same" href=""&百度&/a&
&a id="same" href=""&新浪&/a&
&input type="button" value="提交" onclick="test1()"/&
&!-- ID相同的时候只认识第一个 --&
&input type="checkbox" name="hobby" value="篮球"/&篮球
&input type="checkbox" name="hobby" value="足球"/&足球
&input type="checkbox" name="hobby" value="排球"/&排球
&input type="button" value="提交" name="testing" onclick="test2()"/&
&!-- &hr/&
&h1&获取指定标签的内容&/h1&
&input type="button" value="智能获取" onclick="getN()"& --&
&h1&智能添加标签&/h1&
&input type="button" value="智能添加" onclick="addtags()"/&
&h1&智能添加/删除input&/h1&
&div style="width:400height:300border:3" id="div1"&&/div&
&input type="button" onclick="addinput()" value="inputAdd"/&
&input type="button" onclick="deleteinput()" value="inputDelete"/&
以上就是小编为大家带来的javascript的document中的动态添加标签实现方法全部内容了，希望大家多多支持就爱阅读~
欢迎转载：
推荐： 　　　如何优雅的用 js 动态添加 html 代码？ · Ruby China
如果需要在js里动态的加载一些html代码，一般会选择下面这样的方式
str="&div class="dialog"&&div class="title"&&img src="close.gif" alt="点击可以关闭" /&亲爱的提示条&/div&&div class="content"&&img src="delete.jpg" alt="" /&&span&您真的要GG吗？&/span&&/div&&div class="bottom"&&input id="Button2" type="button" value="确定" class="btn"/&&&&input id="Button3" type="button" value="取消" class="btn"/&&/div&&/div&"
感觉这样太丑了，可读性和可维护性都很差。有什么更加优雅和简洁的方式吗？
gem 'liquid'
gem 'settingslogic'
# settingslogic config file
template: |
blabla.... {{name}}... blabla... {{email}}
# controller
template = Liquid::Template.parse(Settings.template)
result = template.render('name' =& '...', 'email'
可以试试这个：
&div class="dialog"&\
&div class="title"&\
&img src="close.gif" alt="点击可以关闭" /&亲爱的提示条\
&div class="content"&\
&img src="delete.jpg" alt="" /&\
&span&您真的要GG吗？&/span&\
&div class="bottom"&\
&input id="Button2" type="button" value="确定" class="btn"/&&&\
&input id="Button3" type="button" value="取消" class="btn"/&\
console.log(str);
Coffeescript
&div class="dialog"&
&div class="title"&
&img src="close.gif" alt="点击可以关闭" /&亲爱的提示条
&div class="content"&
&img src="delete.jpg" alt="" /&
&span&您真的要GG吗？&/span&
&div class="bottom"&
&input id="Button2" type="button" value="确定" class="btn"/&&&
&input id="Button3" type="button" value="取消" class="btn"/&
想要完全避免这种情况 可以用react
就因为这点就使用react的话，未免有点为了技术去技术了。
str = '&div class="dialog"&' +
'&div class="title"&' +
'&img src="close.gif" alt="点击可以关闭" /&亲爱的提示条' +
'&/div&' +
'&div class="content"&' +
'&img src="delete.jpg" alt="" /&&span&您真的要GG吗？&/span&' +
'&/div&' +
'&div class="bottom"&' +
'&input id="Button2" type="button" value="确定" class="btn"/&&&' +
'&input id="Button3" type="button" value="取消" class="btn"/&' +
'&/div&' +
如果不依赖lib，只能从代码格式化的角度去做优化了。
如果嫌弃react太重（10k+ js），可以去看看 前端模板。比如 doT.js
&div id="dialog-quit" class="dialog"&
&div class="title"&
&img src="close.gif" alt="点击可以关闭" /&亲爱的提示条
&div class="content"&
&img src="delete.jpg" alt="" /&
&span&您真的要GG吗？&/span&
&div class="bottom"&
&input id="Button2" type="button" value="确定" class="btn"/&&&
&input id="Button3" type="button" value="取消" class="btn"/&
JavaScript(jQuery)
$('#dialog-quit')
用jQuery的load方法试试咯
写在js中没有重用性，显得代码很乱，增加后期维护的复杂度，还是希望html的代码能够和js代码分开，而且可以通过ajax动态添加数据。
这种方式不错，但是如果需要动态生成一些数据，是不是还得根据jquery选择器一个一个replace？
前端模板引擎
没必要过度工程. 楼主的情况应该是很简单的动态效果, 在 coffee 写就行
coffee 写就好了。
恩，谢谢！
Handlebars
google js template
大神你复活了？
18楼 已删除
这么大段的html代码放在js中维护完全不合理
template = $('#dialog-quit').html()
html = template.format({data})
只需配合几行的模板方法：
// add `format` method to `String`, equivalent to printf/string.format
// usage: "{a} {b}".format({a: 'hi', b: 'b'}) =& "hi b"
// /questions/610406/javascript-equivalent-to-printf-string-format/34317
if (!String.prototype.format) {
String.prototype.format = function() {
var str = this.toString();
if (!arguments.length)
var arg = typeof arguments[0],
args = (("string" == args || "number" == args) ? arguments : arguments[0]);
for (arg in args)
str = str.replace(RegExp("\\{" + arg + "\\}", "gi"), args[arg]);
这两天突然想起来以前看到某大神提到 rivets
把以前一个小项目的 ujs + tempojs 的代码用
Promise + rivets + watch.js 重构了一下，代码清晰了好多
如果你用过backbone.js可能会知道这种方式:
1.把要用js加载的html放到 html 文件的script标签里:
&script id="your-tmpl" type="text/template" charset="utf-8"&
&div class="dialog"& .... &/div&
2.javascript中加载(jQuery)
var dialogTemplate = $('#your-tmpl').html();
如果有需要传递参数, 比如使用 underscore 的template
1.创建模板
&script id="your-tmpl" type="text/template" charset="utf-8"&
&div class="dialog"&
&%= name %&
2.javascript中加载(jQuery)
var dialogTemplate = $('#your-tmpl').html()
3.编译模板
var dialogHtml = _.template(dialogTemplate)({ name: 'lvjain700' });
除非是很大量的需要，否则我会用 2 楼的方法，如果真要找个 template 处理，可以搜寻 javascript template 找个合用的。
后方可回复, 如果你还没有账号请点击这里 。
共收到 23 条回复用Jquery动态append方式加入标签时Css样式丢失的解决方法_心得技巧_动态网站制作指南
用Jquery动态append方式加入标签时Css样式丢失的解决方法
来源：人气：84
这两天做一个文本编辑器,会动态用append方式添加html,遇到了失效问题,后来网上翻了翻资料,找到如下解决方式:
$(&#所在标签id&).append(obj); &// 用append 方式添加拼接的标签
$(&#所在标签id&).listview(&refresh&); & //在使用'ul'标签时才使用，作用:刷新列表
$(&#所在标签id&).trigger(&create&);
&//重新加载所在标签的样式。不加这一句动态append的标签将丢失Css样式
优质网站模板通过js脚本实现动态添加HTML标签_百度文库
两大类热门资源免费畅读
续费一年阅读会员，立省24元！
通过js脚本实现动态添加HTML标签
上传于|0|0|文档简介
&&通过js脚本实现动态添加HTML标签,根据你选择标签的不同,而实现动态添加标签,并实现添加到你所特指的层里面!
你可能喜欢}