<html>
<head>
<meta charset="UTF-8">
<title>RunJS</title>
<script id="jquery_180" type="text/javascript" class="library" src="/js/sandbox/jquery/jquery-1.8.0.min.js"></script>
<script type="text/javascript">
function c(a, b) {
var ap = a.parents("#1option")
if (!b) {
ap.toggle()
} else {
ap.find(b).toggle()
}
}
$(function() {
$(":button[value='添加']").click(function() {
$("body").append($("textarea").val())
})
})
</script>
</head>
<body>
<input type="button" value="添加" />
<textarea style="display:none">
<div id="1option" style="width:800pxheight:170pxdisplay:block">
<div id="first">
<div style="width:800pxheight:20pxbackground-color:#EDEDED">
<div id="legend" style="float:left">c</div>
<div class="fa fa-times" id="close12" onclick="c($(this))" style="float: rightcursor:pointer">x</div>
<div class="fa fa-arrows-alt" id="d1toBig" onclick="c($(this),'#seconddiv')" style="float:rightmargin-right:5px">s</div>
<div class="fa fa-wikipedia-w" id="d1To7day" style="float:rightmargin-right:5pxcursor:pointer"></div>
</div>
<div id="container" style="width:800pxheight:150pxbackground-color:#FFFFFF"></div>
</div>
<div id="seconddiv" style="height:900pxwidth:1580pxz-index: 9999 display:none position: fixed left: 10px top: 15pxbackground-color: #2E8B57">
<div class="fa fa-times" id="close12" onclick="c($(this),'#seconddiv')" style="float: rightmargin-right:40pxmargin-top:7pxcursor:pointer"></div>
<div id="newdiv1" style="width:1500pxheight:700pxmargin-left:40pxmargin-top:30px"></div>
</div>
</div>
</textarea>
</body>
</html>
动态添加的html代码,如果在还没有真正渲染生成dom之前,js是无法获取到它们的,也就是节点根本不存在,所以原本的js就无法生效。对于动态生成的html,应该在生成完成之后再执行一次需要对这些html *** 作的js代码。
所谓动态写入方法就是源文件代码中原来没有内容或者需要重新改变此处的要显示的文字或内容,需要用JavaScript
代码来实现。动态写入是一种很常见常用的方法。
1、用
innerHTML
写入
html代码
:
<div
id="abc"></div>
<script>document.
getElementById
("abc").innerHTML="要写入的文字或内容"</script>
2、
appendChild
()
方法:
<ul
id="myList"><li>Coffee</li><li>Tea</li></ul>
<button
onclick="myFunction()">点击向列表添加项目</button>
<script>
function
myFunction(){
var
node=document.createElement("LI")
var
textnode=document.createTextNode("Water")
node.appendChild(textnode)
document.getElementById("myList").appendChild(node)
}
</script>
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)