jQuery 添加元素

jQuery

jQuery 教程 jQuery 简介 jQuery 安装 jQuery 语法 jQuery 选择器 jQuery 事件 jQuery 隐藏/显示 jQuery 淡入/淡出 jQuery 滑动 jQuery 动画 jQuery 停止动画 jQuery Callback jQuery Chaining jQuery 捕获 jQuery 设置 jQuery 添加元素 jQuery 删除元素 jQuery CSS类 jQuery css() 方法 jQuery 尺寸 jQuery 遍历 jQuery 遍历 - 祖先 jQuery 遍历 - 后代 jQuery 遍历 - 同胞 jQuery 遍历- 过滤 jQuery - AJAX 简介 jQuery - AJAX load() jQuery - AJAX get()/post() 方法 jQuery - noConflict() 方法 jQuery JSONP jQuery 实例 jQuery 选择器 jQuery 事件方法 jQuery 效果方法 jQuery HTML / CSS 方法 jQuery 遍历方法 jQuery AJAX 方法 jQuery 杂项方法 jQuery 属性 jQuery Validate jQuery Accordion jQuery Autocomplete jQuery Message jQuery 密码验证 jQuery Prettydate jQuery Tooltip jQuery Treeview

jQuery 添加元素

通过 jQuery，可以很容易地添加新元素/内容。

添加新的 HTML 内容

我们将学习用于添加新内容的四个 jQuery 方法：

append() - 在被选元素的结尾插入内容
prepend() - 在被选元素的开头插入内容
after() - 在被选元素之后插入内容
before() - 在被选元素之前插入内容

jQuery append() 方法

jQuery append() 方法在被选元素的结尾插入内容。

<!DOCTYPE html>

<html>

<head>

</script>

$(document).ready(function(){

$("#btn1").click(function(){

$("p").append(" <b>追加文本</b>。");

});

$("#btn2").click(function(){

$("ol").append("<li>追加列表项</li>");

});

</script>

</head>

<body>

<p>这是一个段落。</p>

<p>这是另外一个段落。</p>

<ol>

</ol>

<button id="btn2">添加列表项</button>

</body>

</html>

通过 append() 和 prepend() 方法添加若干新元素

在上面的例子中，我们只在被选元素的开头/结尾插入文本/HTML。

不过，append() 和 prepend() 方法能够通过参数接收无限数量的新元素。可以通过 jQuery 来生成文本/HTML（就像上面的例子那样），或者通过 JavaScript 代码和 DOM 元素。

在下面的例子中，我们创建若干个新元素。这些元素可以通过 text/HTML、jQuery 或者 JavaScript/DOM 来创建。然后我们通过 append() 方法把这些新元素追加到文本中（对 prepend() 同样有效）：

<!DOCTYPE html>

<html>

<head>

</script>

function appendText(){

var txt1="<p>文本。</p>"; // 使用 HTML 标签创建文本

var txt2=$("<p></p>").text("文本。"); // 使用 jQuery 创建文本

var txt3=document.createElement("p");

txt3.innerHTML="文本。"; // 使用 DOM 创建文本 text with DOM

$("body").append(txt1,txt2,txt3); // 追加新元素

}

</script>

</head>

<body>

<p>这是一个段落。</p>

</body>

</html>

jQuery after() 和 before() 方法

jQuery after() 方法在被选元素之后插入内容。

jQuery before() 方法在被选元素之前插入内容。

<!DOCTYPE html>

<html>

<head>

</script>

$(document).ready(function(){

$("#btn1").click(function(){

$("img").before("<b>之前</b>");

});

$("#btn2").click(function(){

$("img").after("<i>之后</i>");

});

</script>

</head>

<body>

</body>

</html>

通过 after() 和 before() 方法添加若干新元素

after() 和 before() 方法能够通过参数接收无限数量的新元素。可以通过 text/HTML、jQuery 或者 JavaScript/DOM 来创建新元素。

在下面的例子中，我们创建若干新元素。这些元素可以通过 text/HTML、jQuery 或者 JavaScript/DOM 来创建。然后我们通过 after() 方法把这些新元素插到文本中（对 before() 同样有效）：

<!DOCTYPE html>

<html>

<head>

</script>

function afterText(){

var txt1="<b>I </b>"; // 使用 HTML 创建元素

var txt2=$("<i></i>").text("love "); // 使用 jQuery 创建元素

var txt3=document.createElement("big"); // 使用 DOM 创建元素

txt3.innerHTML="jQuery!";

$("img").after(txt1,txt2,txt3); // 在图片后添加文本

}

</script>

</head>

<body>

</body>

</html>

上一篇:jQuery 设置

下一篇:jQuery 删除元素

我要发贴

jQuery