js动态添加html代码（js动态添加html标签）

本篇文章给大家谈谈js动态添加html代码，以及js动态添加html标签对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。

本文目录一览：

• 1、如何把JS文件添加到HTML里？JS代码如图：
• 2、如何用js动态写入html代码？
• 3、如何优雅的用js动态添加html代码

如何把JS文件添加到HTML里？JS代码如图：

1、J首先输入s_file01.js，//程序代码 document.write(" script language=\"javascript\" src="\/com\/ Js_file02.js \" \/script")。

2、 html代码 代码如下:html body input type="button" value="ok" onclick="javascript:fun_b()" /body //必须在这个位置，也即body.../body之下: script language="JAVASCRIPT" src='Js_b.js' /script /html 。

3、Js_file01.js 代码如下://程序代码 document.scripts[0].src=" Js_file02.js"。

4、看到自己的JS文件。

5、可以看到js插入成功了。

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

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

JavaScript

代码来实现。动态写入是一种很常见常用的方法。

1、用

innerHTML

写入

html代码

：

div

id="abc"/div

scriptdocument.

getElementById

("abc").innerHTML="要写入的文字或内容"/script

2、

appendChild

()

方法：

ul

id="myList"liCoffee/liliTea/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代码

一、使用javascript 模板引擎

用javascript预编译模版，就是动态修改模板文件使之成为一个可用的静态HTML文件。 我平时会使用artTemplate，性能很好而且易上手。

编写模板

使用一个type="text/html"的script标签存放模板：

script id="test" type="text/html"

h1{{title}}/h1

ul

{{each list as value i}}

li索引 {{i + 1}} ：{{value}}/li

{{/each}}

/ul

/script

渲染模板

var data = {

title: '标签',

list: ['文艺', '博客', '摄影', '电影', '民谣', '旅行', '吉他']

};

var html = template('test', data);

document.getElementById('content').innerHTML = html;

二、使用CoffeeScript

CoffeeScript支持类似于Python的跨行字符串，这样很轻易的就能保持HTML结构的可读性，而不需要使用“+”或者采用拼数组的形式。

str="""

div class="dialog"

div class="title"

img src="close.gif" alt="关闭" /关闭

/div

div class="content"

img src="delete.jpg" alt="" /

/div

div class="bottom"

input id="Button2" type="button" value="确定" class="btn"/

input id="Button3" type="button" value="取消" class="btn"/

/div

/div

"""

js动态添加html代码的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于js动态添加html标签、js动态添加html代码的信息别忘了在本站进行查找喔。