JS如何在页面中插入HTML代码

html-css010

JS如何在页面中插入HTML代码,第1张

在JS中插入短的HTML代码，可以通过先使用一个函数来包着，你要添加的HTMl代码，然后在使用innerHTML这个函数提取就行，在你的HTMl中添加一个事件就行，然后调用这个函数就行了，具体的我提供例子给你看下：

<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的对象插入内容。