在 jQuery 中创建元素

2023-03-14 23:21| 来源: 网络整理| 查看: 265

当前位置：主页 > 学无止境 > WEB前端 > WEB前端编程语言网络算法操作系统数据库在 jQuery 中创建元素作者：迹忆客最近更新：2023/03/13 浏览次数：

createElement() 是来自核心 JavaScript 的用于创建 HTML 元素的方法。在 jQuery 中，有一些方法可以执行类似的操作。

本教程演示如何在 jQuery 中创建 HTML 元素。

在 jQuery 中创建元素

jQuery 中有四种创建 HTML 元素的方法：

让我们讨论并尝试每种方法的示例。

使用 append() 方法在 jQuery 中创建元素

append() 方法将元素添加到所选元素的末尾。添加一个 HTML 元素的语法很简单。

参见示例：

$(document).ready(function(){ $("#DemoButton").click(function(){ $("#two").append("

This is paragraph three

"); }); }); This is paragraph One. This is paragraph two. Append paragraph

上面的代码将一次添加一个 HTML 段落元素。

我们还可以使用 append() 方法创建多个元素。参见示例：

function append_paragraphs() { var ELement1 = "

This is a paragraph two.

"; // paragraph with HTML var ELement2 = $("

").text("This is a paragraph three."); // paragraph with jQuery var ELement3 = document.createElement("p"); ELement3.innerHTML = "This is a paragraph four"; // paragraph with DOM $("body").append(ELement1, ELement2, ELement3); // Append all paragraph elements } This is a paragraph one. Append Paragraphs

上面的代码将使用 append() 方法创建三个新段落。

使用 prepend() 方法在 jQuery 中创建元素

prepend() 方法将元素添加到所选元素的开头。一个 HTML 元素的语法很简单。

参见示例：

$(document).ready(function(){ $("#DemoButton").click(function(){ $("#two").prepend("

This is the new paragraph

"); }); }); This is paragraph One. This is paragraph two. Append paragraph

该代码将在第二段之前附加一段。

同样，我们预先添加多个元素。参见示例：

function Prepend_paragraphs() { var ELement1 = "

This is a paragraph one.

"; // paragraph with HTML var ELement2 = $("

").text("This is a paragraph two."); // paragraph with jQuery var ELement3 = document.createElement("p"); ELement3.innerHTML = "This is a paragraph three"; // paragraph with DOM $("body").prepend(ELement1, ELement2, ELement3); // Prepend all paragraph elements } This is a the last paragraph. Prepend Paragraphs

上面的代码将在给定元素之前创建多个元素。

在 jQuery 中使用 after() 和 before() 方法创建元素

after() 方法将在给定元素之后创建一个元素，类似地，before() 方法将在给定元素之前创建一个元素。

请看下面两个方法的例子。

$(document).ready(function(){ $("#button1").click(function(){ $("h1").before(" Element Before "); }); $("#button2").click(function(){ $("h1").after(" Element After "); }); }); 迹忆客 Insert element before Insert element after

上面的代码将在给定元素之前和之后创建元素。

同样，我们可以使用 after() 和 before() 方法创建多个元素。参见示例：

function After_Element() { var Element1 = "This "; // element with HTML var Element2 = $("").text("is "); //with jQuery var Element3 = document.createElement("b"); // with DOM Element3.innerHTML = "jiyik.com."; $("h1").after(Element1, Element2, Element3); // Insert new elements after h1 } function Before_Element() { var Element1 = "This "; // element with HTML var Element2 = $("").text("is "); //with jQuery var Element3 = document.createElement("b"); // with DOM Element3.innerHTML = "jiyik.com."; $("h1").before(Element1, Element2, Element3); // Insert new elements before h1 } 迹忆客 Create Elements after the h1. Insert after Create Elements before the h1. Insert before

上面的代码将在给定元素之前和之后添加多个元素。

上一篇：jQuery 切换隐藏/显示

下一篇：从 jQuery 的下拉列表中获取选定的选项