如何用js脚本输出一段Html代码

JavaScript014

如何用js脚本输出一段Html代码,第1张

拿到你的页面元素，使用append，appendTo，prepend或prependTo

prepend() 语法：$(selector).prepend(content) 或 $(selector).prepend(function(index,html))

prependTo() 语法：$(content).prependTo(selector)

提示：prepend() 和 prependTo() 方法作用相同。

差异在于语法：内容和选择器的位置，以及 prependTo() 无法使用函数来插入内容。

append() 方法在被选元素的结尾（仍然在内部）插入指定内容。

append() 语法：$(selector).append(content)

appendTo() 语法：$(content).appendTo(selector)

其实你的css代码和js代码都可以单独放在外面，这样html的代码整洁点。

下面是html的代码

-----------------------------

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" >

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/htmlcharset=gb2312" />

<title>简洁Tab</title>

<LINK REL="stylesheet" HREF="style.css" TYPE="text/css" media="screen, projection" />

<script type="text/javascript" src="menu2.js"></script>

</head>

<body>

<div id="lib_Tab1">

<div class="lib_Menubox lib_tabborder">

<ul>

<li id="one1" onclick="setTab('one',1,4)" class="hover">新闻1</li>

<li id="one2" onclick="setTab('one',2,4)">新闻2</li>

<li id="one3" onclick="setTab('one',3,4)">新闻3</li>

<li id="one4" onclick="setTab('one',4,4)">新闻4</li>

</ul>

</div>

<div class="lib_Contentbox lib_tabborder">

<div id="con_one_1" >新闻列表1</div>

<div id="con_one_2" style="display:none">新闻列表2</div>

<div id="con_one_3" style="display:none">新闻列表3</div>

<div id="con_one_4" style="display:none">新闻列表4</div>

</div>

</div>

</body>

</html>

memu2.js文件

-----------------------------------------

function setTab(name,cursel,n){

for(i=1i<=ni++){

var menu=document.getElementById(name+i)

var con=document.getElementById("con_"+name+"_"+i)

menu.className=i==cursel?"hover":""

con.style.display=i==cursel?"block":"none"

}

}

style.css文件

------------------------------------------

/*选项卡1*/

#lib_Tab1{width:500pxmargin:0pxpadding:0pxmargin-bottom:30px}

/*选项卡2*/

#lib_Tab2{width:576pxmargin:0pxpadding:0pxmargin-bottom:15px}

/*菜单class*/

.lib_tabborder{border:1px solid lightblue}

.lib_Menubox {height:28pxline-height:28pxposition:relative}

.lib_Menubox ul{margin:0pxpadding:0pxlist-style:noneposition:absolutetop:3pxleft:0margin-left:10pxheight:25pxtext-align:center}

.lib_Menubox li{float:leftdisplay:blockcursor:pointerwidth:114pxcolor:#949694font-weight:boldmargin-right:2pxheight:25pxline-height:25pxbackground-color:#E4F2FD}

.lib_Menubox li.hover{padding:0pxbackground:orangewidth:116pxborder:1px 1px 0 1px border-bottom:1px orangeheight:25pxline-height:25px}

.lib_Contentbox{clear:bothmargin-top:0pxborder-top:noneheight:181pxtext-align:centerpadding-top:8px}

说明

------------------------------------------

我改的时候，这三个文件时放在一起的， 如果你想归类的话，例如

css文件夹放所有css文件， js文件夹放所有js文件，在html里的引用就要把文件路径写正确。