Có thể thay thế một phần tử html?

Đối với ngữ cảnh, tôi đang thu thập dữ liệu một trang bằng colly. Tôi muốn chuyển đổi các lớp tùy chỉnh thành

 Heading 
0 để có thể hiển thị chính xác. Tôi đã thử
 Heading 
1 và nó không hoạt động và loại bỏ nhịp mà không thay thế bằng pre

c.OnHTML("span.e", func (e *colly.HTMLElement) {
		e.DOM.ReplaceWith("
")
})

  1. Câu trả lời được chấp nhận

Câu trả lời được chấp nhận

Sử dụng hàm ReplaceWithHtml của goquery

Để làm điều này trong goquery, bạn có thể sử dụng hàm

 Heading 
0. Nó thay thế từng phần tử trong tập hợp các phần tử phù hợp bằng HTML được phân tích cú pháp. Nó trả về các phần tử đã loại bỏ

Chúng ta có thể thay thế một phần tử DOM tại chỗ bằng JavaScript bằng cách lấy phần tử gốc của phần tử mà chúng ta muốn thay thế

Sau đó, chúng ta có thể gọi phương thức

 Heading 
2 trên đó để thay thế phần tử thay cho phần tử con hiện tại của cha mẹ

Chẳng hạn, nếu chúng ta có HTML sau


hello world

Sau đó, chúng ta có thể thực hiện thay thế bằng cách viết

const div = document.querySelector("div");
const span = document.createElement("span");
span.innerHTML = "hello james";
div.parentNode.replaceChild(span, div);

Chúng tôi nhận được div với

 Heading 
3

Sau đó, chúng tôi tạo một khoảng mà chúng tôi muốn thay thế div bằng

 Heading 
4

Tiếp theo, chúng tôi đặt nội dung của khoảng bằng cách đặt thuộc tính

 Heading 
5

Và cuối cùng, chúng tôi gọi

 Heading 
6 với
 Heading 
7 và
 Heading 
8 để thay thế div bằng span

Bây giờ chúng ta sẽ thấy 'hello james' thay cho 'hello world'

Sử dụng phương thức thay thếWith

Một cách dễ dàng hơn để thay thế một phần tử bằng một phần tử khác là sử dụng phương thức

const div = document.querySelector("div");
const span = document.createElement("span");
span.innerHTML = "hello james";
div.parentNode.replaceChild(span, div);
0

Để sử dụng nó, chúng tôi viết

const div = document.querySelector("div");
const span = document.createElement("span");
span.innerHTML = "hello james";
div.replaceWith(span);

Ở dòng cuối cùng, chúng ta gọi

const div = document.querySelector("div");
const span = document.createElement("span");
span.innerHTML = "hello james";
div.parentNode.replaceChild(span, div);
1 bằng
 Heading 
7 để thay thế
 Heading 
8 bằng
 Heading 
7

Và chúng tôi nhận được kết quả tương tự như ví dụ trước

Sự kết luận

Chúng ta có thể thay thế một phần tử DOM tại chỗ bằng cách lấy nút cha của phần tử mà chúng ta muốn thay thế và gọi

 Heading 
2 trên nút cha

Hoặc chúng ta có thể gọi

const div = document.querySelector("div");
const span = document.createElement("span");
span.innerHTML = "hello james";
div.parentNode.replaceChild(span, div);
0 trên phần tử mà chúng ta muốn thay thế và chuyển vào phần tử mà chúng ta muốn thay thế làm đối số


HTML DOM cho phép JavaScript thay đổi nội dung của các phần tử HTML


Thay đổi nội dung HTML

Cách dễ nhất để sửa đổi nội dung của phần tử HTML là sử dụng thuộc tính

 Heading 
5

Để thay đổi nội dung của một phần tử HTML, hãy sử dụng cú pháp này

tài liệu. getElementById(id). InternalHTML = HTML mới

Ví dụ này thay đổi nội dung của một

yếu tố

Thí dụ


Chào thế giới


Tự mình thử »

Ví dụ giải thích

  • Tài liệu HTML ở trên chứa một

    phần tử có


    hello world
    4

  • Chúng tôi sử dụng HTML DOM để lấy phần tử có

    hello world
    4
  • Một JavaScript thay đổi nội dung (
     Heading 
    5) của phần tử đó thành "Văn bản mới. "

Ví dụ này thay đổi nội dung của một

yếu tố

Thí dụ



tiêu đề cũ


Tự mình thử »

Ví dụ giải thích

  • Tài liệu HTML ở trên chứa một phần tử có

    hello world
    7
  • Chúng tôi sử dụng HTML DOM để lấy phần tử có

    hello world
    7
  • JavaScript thay đổi nội dung (
     Heading 
    5) của phần tử đó thành "Tiêu đề mới"


Thay đổi giá trị của một thuộc tính

Để thay đổi giá trị của thuộc tính HTML, hãy sử dụng cú pháp này

tài liệu. getElementById(id). thuộc tính = giá trị mới

Ví dụ này thay đổi giá trị của thuộc tính src của phần tử

const div = document.querySelector("div");
const span = document.createElement("span");
span.innerHTML = "hello james";
div.parentNode.replaceChild(span, div);
0

Thí dụ



Có thể thay thế một phần tử html?


Tự mình thử »

Ví dụ giải thích

  • Tài liệu HTML ở trên chứa phần tử
    const div = document.querySelector("div");
    const span = document.createElement("span");
    span.innerHTML = "hello james";
    div.parentNode.replaceChild(span, div);
    0 với
     Heading 
    50
  • Chúng tôi sử dụng HTML DOM để lấy phần tử có
     Heading 
    50
  • JavaScript thay đổi thuộc tính
     Heading 
    52 của phần tử đó từ "smiley. gif" thành "phong cảnh. jpg"

Nội dung HTML động

JavaScript có thể tạo nội dung HTML động

Thí dụ




Tự mình thử »


tài liệu. viết()

Trong JavaScript,

 Heading 
53 có thể được sử dụng để ghi trực tiếp vào luồng đầu ra HTML

Thí dụ



bla bla bla

bla bla bla


Tự mình thử »

Không bao giờ sử dụng

 Heading 
53 sau khi tải tài liệu. Nó sẽ ghi đè lên tài liệu


Kiểm tra bản thân với các bài tập

Tập thể dục

Sử dụng HTML DOM để thay đổi giá trị của thuộc tính src của hình ảnh

________số 8


Cung cấp câu trả lời "

Bắt đầu bài tập



Phương pháp nào sau đây được sử dụng để thay thế một phần tử HTML?

Phương thức replacewith() của JavaScript được sử dụng để thay thế một phần tử HTML bằng một phần tử khác theo yêu cầu.

Những gì được sử dụng để thay thế các yếu tố nội dung?

Phương pháp phổ biến nhất để thay thế nội dung bên trong một phần tử là sử dụng thuộc tính innerHTML . Ngoài ra, bạn có thể sử dụng textContent để đặt nội dung văn bản của phần tử, được coi là an toàn trước các cuộc tấn công XSS.

JavaScript có thể thay thế HTML không?

Không vì họ không làm điều tương tự . HTML là cách trình duyệt hiểu cái gì và ở đâu để hiển thị mọi thứ. JavaScript là ngôn ngữ hành vi cho phép trình duyệt của bạn thao tác với HTML trong trình duyệt.

Phần tử mới trong HTML là gì?

Thẻ mới HTML5