1. 程式人生 > >jquery在某個元素後追加html程式碼

jquery在某個元素後追加html程式碼

在某個html元素中設定你想顯示的html程式碼,大家已經很熟悉了。js就有.InnerHTML可以設定。

但是在這個元素後追加html程式碼也是可以的,這是在jquery手冊上找到的

$("button").click(function(){
  $("p").after("<p>Hello world!</p>");
});

定義和用法

after() 方法在被選元素後插入指定的內容。
語法

$(selector).after(content)

引數 	描述
content 	必需。規定要插入的內容(可包含 HTML 標籤)。
使用函式來插入內容

使用函式在被選元素之後插入指定的內容。
語法

$(selector).after(function(index))

親自試一試
引數 	描述
function(index) 	

必需。規定返回待插入內容的函式。

    index - 可選。接收選擇器的 index 位置。

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("p").after(function(n){
      return "<p>The p element above has index " + n + "</p>";
    });
  });
});
</script>
</head>

<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>在每個 p 元素後插入內容</button>
</body>
</html>

我的例子:
var jiang=$(":input[name='editVo.string(lessonId)']");//根據name獲取這個元素
jiang.after("<font color='red'> *</font>")//在這個元素後追加html程式碼