本文目录一览：
- 1、如何优雅的用js动态添加html代码
- 2、如何用js动态写入html代码
- 3、使用js向网页中写入html内容
- 4、JS如何在页面中插入HTML代码
- 5、怎么用JS获取某一个指定页面（非本页面）的HTML代码？
- 6、如何在 JS 中嵌入 HTML 代码
如何优雅的用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代码
所谓动态写入方法就是源文件代码中原来没有内容或者需要重新改变此处的要显示的文字或内容，需要用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内容
js可以向网页中写入html内容，方法是调用write方法向document的节点中写入html元素
以下展示两个实例
1.在网页上写入一个标题为hello的元素
效果如图：
2.在网页上写入一个九九乘法表
在js中可以使用上面的 h1 hello /h1 这样的开始标签和闭合标签在一起的标签写法，也可以将开始标签和闭合标签分开来写，例如本例。
本例的逻辑是用table标签建立一个表，然后用for循环分别计算九九乘法的结果，在写入结果的前后用tr标签形成一行，计算结果的时候用td标签形成一列
效果图：
通过chrome浏览器右键检查，可以看到的确写入了一个九九乘法表的table到网页中
注意：
在进行字符串拼接的时候如果没有处理好，会出现 SyntaxError: missing ) after argument list 的错误，需要谨慎对待，具体问题具体对待，解决方法可以参考下面的资料或者自行google
1. SyntaxError: missing ) after argument list
2. js中出现missing ) after argument list
3. JavaScript: SyntaxError: missing ) after argument list [closed]
JS如何在页面中插入HTML代码
步骤
1、新建一网页文件“sample.html”,用记事本或其它文本编辑软件（如UltraEdit）打开，输入如图所示的HTML代码。该网页文件包括一个蓝色的字符串，一个按钮和一个文本框。
2、JS代码可插入到”head”标签之间。编写Javascript代码，代码内容如图所示，并将该段代码复制到网页文件”sample.html“中标签”head”和“/head之间，然后查看网页文件的显示内容。
怎么用JS获取某一个指定页面（非本页面）的HTML代码？
1、在浏览器中打开要调试的网页，然后点击”F12 Developer Tools“，也可以使用快捷键F12。
2、弹出的工具窗口中，默认选择是Dom Explorer功能，它会列出网页的源代码和CSS样式列表。
3、使用元素定位功能选择页面中的一个元素，也会定位到源代码中位置。
4、对定位到的文字修改CSS样式，添加inline style，比如把字体变为红色。
5、查看元素已经应用的CSS样式，点击”computed”菜单。
6、然后查看元素的布局信息，点击”Layout”菜单。
如何在 JS 中嵌入 HTML 代码
不能这么写的，两者的执行位置不一样，JSP在服务器，JS在客户端。
JSP代码最后都是要编译成Servlet在服务端执行的，然后把HTML格式的执行结果输出到客户端，而JavaScript是要发送到客户端解释执行的，两者的执行一个在前，一个在后，没法嵌套，即：
JSP-Servlet(在服务器端执行)-HTML(包括JS)-客户端(解释执行JS并渲染HTML)
不过JSP代码倒是可以嵌套在JavaScript中，因为在将执行结果(HTML)返回给用户之前，JSP会在服务器端执行，而嵌套在JavaScript中的JSP代码就会替换为执行结果，如：
script type=”text/javascript”
function test(){
var i=%=request.getLocalPort()%;
alert(i);
}
/script
如果实在要写的话可以通过JSP的内置对象out来把JavaScript代码输出到客户端，但这样还是走的JSP-Servlet-HTML的流程，等于多走了一步，还不如直接写在HTML里.
下面给出一个例子：
%
out.println(“script type=’text/javascript’alert(‘Hello’)/script”);
%
原创文章，作者：CJXW，如若转载，请注明出处：https://www.506064.com/n/141213.html
微信扫一扫 
支付宝扫一扫 