SoFunction
Updated on 2025-04-03

Use js to implement html tags and text hiding, displaying, deleting and adding

1: Hide and display of HTML tags

Method 1: Use the visibility attribute of the style in the tag

("EleId").="hidden";
("EleId").="visible";

However, after using the above method to achieve hiding, the position of the page is still occupied by the control and the display is blank.

Method 2: Use the display attribute in the style in the tag

("EleId").="none"; //hide("EleId").="inline";//show

Method 3:

In jquery, you can use the hide() method to hide various tags, and the hide() method to hide the selected elements.

$(" can be written with id, tag name, or class)

Example: Hide a tag

$("a").hide()  //hide$("a").show()  //show

Method 4: Use the toggle method in juqery

Use the same as $("").toggle();

Method 5: $("#buyButton").attr("disabled", true);

Two: Delete the tags in HTML

Method 1

First get it through (""), and then use the (object) method to delete the node

Note: This method is recommended

var iframe = ('jiazai')
         = 'about:blank';
        (iframe)

Method 2: Directly call the remove() method or empty() method in the jquery library:

$("#div1").remove();
$("#div1").empty();

Note: remove is to delete the selected element and its child elements, empty is to delete the selected element's child elements.

Method 3: Filter deleted elements

The jQuery remove() method can accept a parameter that allows you to filter the deleted elements.

This parameter can be syntax for any jQuery selector.

The following example removes all <p> elements of class="italic":

instance $("p").remove(".italic");

Sample:

&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;meta charset="utf-8"&gt;
&lt;script src="/jquery/1.10.2/"&gt;
&lt;/script&gt;
&lt;script&gt;
$(document).ready(function(){
  $("button").click(function(){
    $("p").remove(".italic");
  });
});
&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;

&lt;p&gt;This is a paragraph。&lt;/p&gt;
&lt;p class="italic"&gt;&lt;i&gt;This is another paragraph。&lt;/i&gt;&lt;/p&gt;
&lt;p class="italic"&gt;&lt;i&gt;This is another paragraph。&lt;/i&gt;&lt;/p&gt;
&lt;button&gt;Remove all  class="italic" of p element。&lt;/button&gt;

&lt;/body&gt;
&lt;/html&gt;

Three: jQuery adds elements

The jQuery append() method inserts content at the end of the selected element (still inside the element).

  • append() - Insert content at the end of the selected element
  • prepend() - Insert content at the beginning of the selected element
  • after() - Insert content after the selected element
  • before() - Insert content before the selected element

Example:

$("p").append("Add text");
$("p").prepend("Add text at the beginning");
$("img").after("Add text afterward");
$("img").before("Add text before");

The append() , prepend() , after() , and before() methods can receive an infinite number of new elements through parameters. Text/HTML can be generated through jQuery, and new elements can be created through text/HTML, jQuery or JavaScript/DOM.

&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;meta charset="utf-8"&gt;
&lt;title&gt;()&lt;/title&gt;
&lt;meta charset="utf-8"&gt;
&lt;script src="/jquery/1.10.2/"&gt;
&lt;/script&gt;
&lt;script&gt;
function appendText(){
	var txt1="<p>Text-1.</p>";              // Create text using HTML tags	var txt2=$("&lt;p&gt;&lt;/p&gt;").text("Text-2.");  // Create text using jQuery	var txt3=("p");
	="Text -3.";               // Create text with DOM	$("body").append(txt1,txt2,txt3);        // Add new elements}
&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;p&gt;This is a paragraph。&lt;/p&gt;
&lt;button onclick="appendText()"&gt;Append text&lt;/button&gt;
&lt;/body&gt;
&lt;/html&gt;
&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;meta charset="utf-8"&gt;
&lt;title&gt;()&lt;/title&gt;
&lt;script src="/jquery/1.10.2/"&gt;
&lt;/script&gt;
&lt;script&gt;
function afterText(){
	var txt1="&lt;b&gt;I &lt;/b&gt;";                    // Create elements using HTML	var txt2=$("&lt;i&gt;&lt;/i&gt;").text("love ");     // Create elements with jQuery	var txt3=("big");  // Create elements using DOM	="jQuery!";
	$("img").after(txt1,txt2,txt3);          // Add text after the picture}
&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;img src="/images/" &gt;
&lt;br&gt;&lt;br&gt;
&lt;button onclick="afterText()"&gt;Insert afterward&lt;/button&gt;
&lt;/body&gt;
&lt;/html&gt;

Summarize

This is the article about using js to implement html tags and text hiding, displaying, deleting and adding content. For more related js to implement html tag hiding and displaying content, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!