js终端添加代码(怎么添加js代码)

发布时间:2023-12-08

js终端添加代码(怎么添加js代码)

更新:2022-11-11 17:49

本文目录一览:

  1. 如何优雅的用js动态添加html代码
  2. js里面添加php代码
  3. 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里面添加php代码

你本意是要在js中读取php输出的值对吗? 你可以先把php输出的值放到一个div里面,再在js中获取div的值就可以了。 建议用jQuery:

<html>
<head>
  <title></title>
  <script src="jquery-1.7.2.min.js" type="text/javascript"></script>
  <script>
    $(function(){
      var tit = $("#tt").attr("title");
      var txt = $("#tt").text();
      alert(tit+"-=---"+txt);
    })
  </script>
</head>
<body>
  <div id="tt" name="tt" title="<?php echo "cccccssfa"; ?>"><?php echo "fsadfsd"; ?></div>
</body>
</html>

JS如何在页面中插入HTML代码

在JS中插入短的HTML代码,可以通过先使用一个函数来包着你要添加的HTML代码,然后使用innerHTML提取即可。在你的HTML中添加一个事件,然后调用这个函数:

<html>
<head>
  <script>
    function insert(){
      var insertText = "<table><tr><td>anything</td></tr></table>";
      document.getElementById("insert").innerHTML = insertText;
    }
  </script>
</head>
<body>
  <button onclick="insert()">Insert</button>
  <div id="insert"></div>
</body>
</html>