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

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

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>

动态写入html代码，主要就是append方法或其他插入方法。如：

var ele=document.createElement('div')//创建div对象

ele.innerHTML='我是测试内容'//在div对象中写入内容

document.body.appendChild(div)//把div放在body标签最后面

jQuery相对于要简单一些，如：

$(document.body).append('<div>我是测试内容</div>')

一、基础不同

1、JS代码：基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式和声明式（如函数式编程）风格。

2、html代码：是由HTML命令组成的描述性文本，HTML命令可以说明文字、图形、动画、声音、表格、链接等。

二、用处不同

1、JS代码：用于Web应用开发,常用来为网页添加各式各样的动态功能，为用户提供更流畅美观的浏览效果。

2、html代码：结构包括头部（Head）、主体（Body）两大部分，其中头部描述浏览器所需的信息，而主体则包含所要说明的具体内容。

三、特点不同

1、JS代码：主要用来向HTML（标准通用标记语言下的一个应用）页面添加交互行为。可以直接嵌入HTML页面，但写成单独的js文件有利于结构和行为的分离。

2、html代码：超级文本标记语言的广泛应用带来了加强功能，增加标识符等要求，超级文本标记语言采取子类元素的方式，为系统扩展带来保证。

参考资料来源：百度百科-JS脚本

参考资料来源：百度百科-html代码

---