jquery實現的設定指定元素的文字內容和html內容

admin發表於2017-03-19
jQueryHTML

本章節介紹一下如何設定指定元素的文字內容和html內容。

首先介紹一下文字內容和html內容的區別。1.文字內容就是講任何字串當做普通的文字進行處理，比如<div></div>就是不同字串，不會被當做標籤處理。

2.html內容就是能夠將此字串的html標籤渲染，比如<strong>螞蟻</strong>，能夠進行渲染，字型會變粗。

一.設定文字內容:

使用如下程式碼即可設定元素文字內容:

[JavaScript] 純文字檢視 複製程式碼
.text()

程式碼例項:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  var str="<strong>螞蟻部落</strong>";
  $("#thediv").text(str);
})
</script>
</head>
<body>
<div id="thediv"></div>
</body>
</html>

上面的程式碼可以設定div的文字內容，字串中的html標籤不會被渲染。

二.設定html內容:

[JavaScript] 純文字檢視 複製程式碼
.html()

程式碼例項:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  var str="<strong>螞蟻部落</strong>";
  $("#thediv").html(str);
})
</script>
</head>
<body>
<div id="thediv"></div>
</body>
</html>

上面的程式碼可以將字串中的html標籤渲染，字型變味粗體。

相關文章