如何用js动态写入html代码？

html-css017

如何用js动态写入html代码？,第1张

所谓动态写入方法就是源文件代码中原来没有内容或者需要重新改变此处的要显示的文字或内容，需要用

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>

所谓动态写入方法就是源文件代码中原来没有内容或者需要重新改变此处的要显示的文字或内容，需要用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>

JS输入输出HTML代码有2种方式：

1、在需要输出的的位置写JS代码：<script>document.write('需要输出的内容')</script>

比如：

<ul>

<script>document.write('<li><a href="/wap2/newsPage/1320">5</a></li><li><a href="/wap2/newsPage/1319">4</a></li><li><a href="/wap2/newsPage/1318">3</a></li><li><a href="/wap2/newsPage/1317">2</a></li><li><a href="/wap2/newsPage/1316">1</a></li>')

</script>

</ul>

2、采用js的innerHTML方法：

例子

<ul id="ul"></ul>

<script>

document.getElementById("ul").innerHTML='<li><a href="/wap2/newsPage/1320">5</a></li><li><a href="/wap2/newsPage/1319">4</a></li><li><a href="/wap2/newsPage/1318">3</a></li><li><a href="/wap2/newsPage/1317">2</a></li><li><a href="/wap2/newsPage/1316">1</a></li>'

</script>