How to add and delete jQuery elements

Due to work needs, we often need to add, delete, change and search elements. What are the methods? This article will tell you how to add and delete jQuery elements. Friends in need can refer to it, I hope it is useful to you.

DOM is the abbreviation of Document Object Modeule. Generally speaking, DOM operations are divided into three aspects.

1. DOM Core

DOM Core is not exclusive to javascript. Any programming language that supports DOM can use it, and its uses are far more than just Web pages can also be used to process any document written in a markup language, such as XML.
For example: document,getElementsByTagName("form"); //Use DOM Core to get the form object.

2. HTML-DOM

When using Javascript and DOM to write scripts for HTML files, there are many attributes that belong to HTML-DOM. The emergence of HTML-DOM even Earlier than DOM Core, it provides some more concise notations to describe the attributes of various HTML elements.
For example: document.forms //HTML-DOM provides a forms object.
PS: It can be seen that obtaining objects and attributes can be implemented using DOM Core or HTML-DOM.

3. CSS-DOM

CSS-DOM is an operation for CSS. In JavaScript, the main function of CSS-DOM is to obtain and set various aspects of the style object. This attribute allows the web page to present various effects.
For example: element.style.color=”red”;//Method to set the font color of an element.

Common methods

1. Find element nodes

var $li = $(“ul li:eq(0)”);//获取ul标记下的第一个li,也可以写成 $(“#ulID li:eq(0)”);

2. Find element attributes

Use jquery's attr() method to obtain the values ​​of various attributes of the element. The parameter of the attr() method can be one or two.
When the parameter is one, it is the name of the attribute to be queried.
When there are two parameters, you can set the value of the attribute.

alert($(“#id”).attr(“title”)); //输出元素的title属性.一个参数
$(“#id”).attr(“title”,”改变title值”); //改变元素的title属性值.二个参数

3. Add element node

$(html) Briefly explain that the $(html) method will create a dom object based on the incoming html tag string. And wrap this dom object into a jquery object and return it. In short, just put all the html code of the mark into the $() factory!
Example:

 var $htmlLi = $(”  <li title=’香蕉’>香蕉</li>”);  //创建DOM对象
         var $ul = $(“ul”);   //获取UL对象
         $ul.append($htmlLi); //将$htmlLi追加到$ul元素的li列表

4. Delete element nodes

Since we need to dynamically change DOM elements frequently, Jquery provides two types of deletion nodes. methods, namely remove() and empty();

4.1 remove() method

$(“p”).remove();// We can Get the element to be deleted, and then call the remove() method
$("ul li:eq(0)").remove().appendTo("ul"); // Delete the first li under ul mark, and then add the deleted li mark back to ul. The remove() method returns the reference of the deleted element. At this time, you can continue to use
$("ul li").remove("li[title!= ABC]");//remove can accept parameters to selectively delete qualified elements;

4.2 empty() method

Strictly speaking, empty The () method does not delete elements, but clears them.
Example:

HTML代码
       <ul>
          <li title=”AAA”>AAA</li>
       </ul>
      JQuery代码
      $(“ul li:eq(0)”).empty();

Result

    <ul>
          <li title=”AAA”></li>
       </ul>

Remember, only the content will be cleared, not the attributes.

The above is the detailed content of How to add and delete jQuery elements. For more information, please follow other related articles on the PHP Chinese website!