<html>
<head>
<script>
function
insert(){
var
insertText
=
"<table><tr><td>any
thing</td></tr></table>"
document.getElementById("insert").innerHTML(insertText)
}
</script>
</head>
<body>
<button
onclick="insert()">Insert</button>
<div
id="insert"></div>
</body>
</html>
思路,在JS中定义要嵌入的html代码,然后通过js进行嵌入即可。
<html><head>
<script>
function insert(){
'定义代码
var insertText = "<table><tr><td>any thing</td></tr></table>"
’从html的标签中取得要插入的id进行innerHTML
document.getElementById("insert").innerHTML = document.getElementById("insert").innerHTML+insertText
}
</script>
</head>
<body>
<button onclick="insert()">Insert</button>
<div id="insert"></div>
</body>
</html>
innerHTML在JS是双向功能:获取对象的内容 或 向对象插入内容;
如:<div id="aa">这是内容</div> ,可以通过 document.getElementById('aa').innerHTML 来获取id为aa的对象的内嵌内容;
也可以对某对象插入内容,如 document.getElementById('abc').innerHTML='这是被插入的内容' 这样就能向id为abc的对象插入内容。
所谓动态写入方法就是源文件代码中原来没有内容或者需要重新改变此处的要显示的文字或内容,需要用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>