js中怎么给HTML中的text赋值并且在页面显示呢

html-css024

js中怎么给HTML中的text赋值并且在页面显示呢,第1张

需要准备的材料分别有：电脑、html编辑器、浏览器。

1、首先，打开html编辑器，新建html文件，例如：index.html，填写问题基础代码。

2、在index.html中的<script>标签，输入js代码：$('#txt').val('测试内容')。

3、浏览器运行index.html页面，此时会发现html中的text被成功用js赋值了“测试内容”的文本。

一、使用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"/>&nbsp&nbsp

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

  </div>

</div>

"""

<!DOCTYPE HTML>

<html lang="zh-CN">

<head>

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />

    <meta name="format-detection" content="telephone=no" />

 <title>tryMyOwnCalendar</title>

 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="application/javascript" language="javascript">  </script>

    <style>

  *{ margin:0 padding:0}

     .choosecal{ width:96% margin:3% auto overflow:hidden}

  .ccaltop{ width:100% border-radius:5px }

  .caltline1,.caltline2{ width:94% background-color:#F90 overflow:hidden padding:2% 3%}

  .caltline1 p,.caltline2 p{ float:left width:10% font-weight:700 text-align:right}

  .caltline1 .bookdate{ width:90% text-align:left}

  .caltline2{ background-color:#FFF display:none}

  .caltline2 p{ width:20%}

  .caltline2 .datetext{ width:35% border:1px solid #000 background-color:#FFF font-weight:700}

  .inputdate{ color:#F60}

  

  .calender{ width:100% margin-top:3% overflow:hidden display:none}

  .selectmouth{ background-color:#F30 width:94% overflow:hiddenpadding:2% 3%border-radius:5px 5px 0 0}

  .selectmouth p{ float:left width:33% color:#FFF font-weight:700 cursor:pointer}

  .selectmouth .selectdate{ width:100% background-color:#F30 border:none color:#FFF font-weight:700 text-align:center} 

  

  .data_table{ width:100%border:1px solid #ccccccborder-collapse:collapse }

  .data_table thead{ background-color:#333}

  .data_table thead td{ color:#FFF text-align:centerborder:1px solid #333border-collapse:collapse padding:1% 0}

  .data_table tbody td{border:1px solid #ccccccborder-collapse:collapse text-align:centercolor:#0C6padding:1% 0}

  .data_table tbody td.orderdate{ color:#000}

  .data_table tbody td.tdselect{ color:#fffbackground-color:#999}

    </style>

</head>

<body>

 <div class="choosecal">

     <div class="ccaltop">

         <div class="caltline1">

             <p class="bookdate">选择入住日期……</p>

                <p><img src="http://js.alixixi.com/demo/CompactNewsPreviewer/images/next.png" /></p>