Computer >> Máy Tính >  >> Lập trình >> Javascript

Xóa và thêm Thẻ HTML mới bằng JavaScript?


Để xóa và thêm các thẻ HTML mới, hãy sử dụng khái niệm ẩn () và hiển thị ().

Giả sử sau đây là các nút của chúng tôi -

<button type="submit" id="hide">Click Me To hide above content </button>
<button type="submit" id="show">Click Me To show above content </button>

Để xóa và thêm thẻ khi nhấp vào nút, hãy sử dụng hie () và show () -

$(document).ready(function(){
   $("#hide").click(function(){
      $("h1").hide();
   });
   $("#show").click(function(){
      $("h1").show();
   });
});

Ví dụ

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initialscale=1.0">
<title>Document</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<h1>Test JavaScript</h1>
<button type="submit" id="hide">Click Me To hide above content
</button>
<button type="submit" id="show">Click Me To show above content
</button>
<script>
   $(document).ready(function(){
      $("#hide").click(function(){
         $("h1").hide();
      });
      $("#show").click(function(){
         $("h1").show();
      });
   });
</script>
</body>
</html>

Để chạy chương trình trên, hãy lưu tên tệp “anyName.html (index.html)” và nhấp chuột phải vào tệp. Chọn tùy chọn “Mở bằng Máy chủ Trực tiếp” trong trình chỉnh sửa Mã VS.

Đầu ra

Điều này sẽ tạo ra kết quả sau -

Xóa và thêm Thẻ HTML mới bằng JavaScript?

Trường hợp 1

Khi bạn nhấp vào nút “Nhấp vào Tôi Để ẩn nội dung bên trên”, bạn sẽ nhận được kết quả sau.

Xóa và thêm Thẻ HTML mới bằng JavaScript?

Trường hợp 2

Khi bạn nhấp vào nút “Nhấp vào Tôi để hiển thị nội dung bên trên”, bạn sẽ nhận được thông tin đầu ra sau đây.

Xóa và thêm Thẻ HTML mới bằng JavaScript?