js終端添加代碼（怎麼添加js代碼）

本文目錄一覽：

• 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

headtitle/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

=

“tabletrtdany

thing/td/tr/table”;

document.getElementById(“insert”).innerHTML(insertText);

}

/script

/head

body

button

onclick=”insert()”Insert/button

div

id=”insert”/div

/body

/html