如何在 JS 中嵌入 HTML 代码

 我来答
吉祥二进制
高粉答主

2016-12-05 · 科技改变生活,生活改变科技。
吉祥二进制
采纳数:33926 获赞数:84577

向TA提问 私信TA
展开全部
大段的 HTML 嵌入到 JS 里结果就是悲剧。不能代码高亮不能自动缩进,太难维护了。

我的经验是,直接把 HTML 单独猜高写到一个浏览器能访问到的文件里,比如 template/foo.html。然后 JS 里发一个同步 XHR 请求去读这个文件,灶兆败例如:

var html = Template.load('/template/foo.html');
var target = document.getElementById('xxx');
target.innerHTML = html;
Template 是一个工具类,负责发送同步 XHR 请求并返回结果。

这样在开发的时候,模板文件和 JS 代码分离,非常好维护。

当然这样做的话,上线的时候总发 XHR 请求也不是办法。所以在打包 JS 之前,我一般会通过脚本把所有的 Template.load('.*') 提取出来,替换成对应 HTML 的内容。这样在开发时非常方便,上线时也没有隐颤性能问题。

比如上面的代码被打包工具跑一下就变成了:

var html = "
    \n
  1. ...
  2. \n
"; // 引号里是 /template/foo.html 对引号、换行做了转义之后的内容,由工具自动生成
var target = document.getElementById('xxx');
target.innerHTML = html;
育知同创教育
2017-05-24 · 百度知道合伙人官方认证企业
育知同创教育
1【专注:Python+人工智能|Java大数据|HTML5培训】 2【免费提供名师直播课堂、公开课及视频教程】 3【地址:北京市昌平区三旗百汇物美大卖场2层,微信公众号:yuzhitc】
向TA提问
展开全部

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

已赞过 已踩过<
你对这个回答的评价是?
评论 收起
lianbiao190
2016-11-19 · 超过36用户采纳过TA的回答
知道小有建树答主
回答量:107
采纳率:0%
帮助的人:70.2万
展开全部

在需要的位置加上js标签用陵春码document.write输出字符串

<script>
document.write('<p>colour1: ' + colour1 + '<br>colour2: '森毁 + colour2 
+ '</p>尺哪');  
</script>



本回答被提问者采纳
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
未来世界992
2016-11-19 · TA获得超过199个赞
知道答主
回答量:388
采纳率:100%
帮助的人:83.2万
展开全部
???
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
幽梦暴力
2016-11-19 · TA获得超过212个赞
知道小有建树答主
回答量:297
采纳率:0%
帮助的人:101万
展开全部
你要潜入什么样的 代码,可以拼接的
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
收起 1条折叠回答
收起 更多回答(3)
推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式