html元素 字符串处理

StopTWorld 发布于 2017/11/20 09:39
阅读 349
收藏 0

各位大佬,请问一下 我想在js动态添加html元素。

比如我新建一个

<td>一个td</td>

在js里

var td = "<td>一个td</td>";    (1)

$("#abc").after(td);

就OK了。但是我现在有了class,例如这样<td class = "td_name"></td>

那么我js就应该这么写

var td = "<td class"+"\"" + "td_name" +"\"" +">一个td</td>";(2)

$("#abc").after(td);

 

从如果有了引号,那么就要处理这种字符串拼接问题,1感觉很头痛,2可能会冗余 而且比较麻烦。 

请问下有没有一些处理工具,或者简便的方法。太对付这些字符串。。。拼接。

比如 我直接把 html元素写好,往里一扔,返回给我的 就是 字符串形式的。

加载中
0
没文化不开心
没文化不开心

js里用单引号,html用双引号不行吗...

没文化不开心
没文化不开心
回复 @StopTWorld : 是的
StopTWorld
StopTWorld
var td = '<td class = "td_name"></td>' 这样?
0
houzhe11
houzhe11

一般是单引号,拼接。。

StopTWorld
StopTWorld
好的。我研究一下
0
_全村人的希望
_全村人的希望

你class 后面的“=”号呢

 

StopTWorld
StopTWorld
。。手敲的遗漏了。
0
哈斯卡会
哈斯卡会

外层用单引号或者网上找转义工具啊

哈斯卡会
哈斯卡会
回复 @StopTWorld : 是啊 “<td class=\"abc\"></td>”
StopTWorld
StopTWorld
就是说 <td class="abc"><t/d> --> <td class="abc"><t/d> 直接使用转义后的 就不涉及字符串的问题了呗。。。 直接套上引号就行了把
0
张亦俊
张亦俊

随便找个模板引擎吧,除非你就这么丁点需求

0
flyinmysky
flyinmysky

找个前端模板引擎,html写模板里,渲染一下就好了。

StopTWorld
StopTWorld
前端搞的少,请问一下模板引擎能有个示例那种的么。。百度了一下 没太搞清楚
0
不咬人

推荐用webpack + es6  可使用模板字符串 变量可以写在${}里 类似

let td =`<td class="${td_name}" >一个td</td>`

不用的话就用模板引擎吧 有很多 以前用过arttemplate 挺不错 类似



// 模板
<script type="html/text" id="myTemplate">
  {{if admin}}  
      {{each list as value index}}  
          <div>{{index}}:{{value}}</div>  
      {{/each}}   
  {{/if}}  
</script>

// 使用
<script>
    var data = { list : ["value1","value2"]}  
    var html = template.render('myTemplate',data);  
    document.getElementById("content").innerHTML = html;  
</script>

 

0
喻恒春
喻恒春

看你写的 $.. 应该是在真实浏览器环境执行的, 那么使用前端模板引擎比较合适. 给你推荐三款

1. https://www.oschina.net/p/laytpl 体积小, 简单

2. https://github.com/aui/art-template 经典字符串方式

3. https://github.com/powjs/powjs 我的作品, DOM Tree 模板, 非字符串的


附上在线 Demo(速度测试 rendering test -> Run Test) https://codepen.io/achun/project/full/XjEvaw

返回顶部
顶部