Làm cách nào để tạo một phần tử trong Công cụ dành cho Chrome Dev?

Question

Tôi muốn thêm phần tử mới vào trang trong công cụ Chrome Dev. Điều này có vẻ như chức năng khá rõ ràng nhưng tôi dường như không thể tìm thấy nó.

Chrome có cho phép tôi tạo các phần tử trong tab DOM không? Tôi nhận ra rằng tôi có thể làm một cái gì đó từ giao diện điều khiển JS, nhưng sẽ thay vì một cái gì đó trên tab DOM.

Answer 1

Chỉ cần nhấp chuột phải vào các yếu tố phụ huynh, thay đổi để 'Chỉnh sửa dưới dạng HTML và sau đó thêm bất cứ điều gì các yếu tố bạn muốn ...

Answer 2

Theo các tài liệu phím F2 nên chuyển đổi thành phần được chọn vào và ra khỏi chỉnh sửa để bạn có thể thêm phần tử bên trong.

Rất tiếc, tôi đang sử dụng Chromebook không có khóa F2.

Answer 3

Hoặc bạn chỉ có thể kích hoạt bảng điều khiển và nối thêm phần tử. Ví dụ, nếu tôi được làm dưới đây về bài đăng này stackoverflow.com cụ thể:

$('.postcell').append('<code>Testing Element Insertion via Chrome</code>'); 

tôi muốn sau đó xem các yếu tố mới được nối hiển thị ngay trong tab Elements:

Answer 4

Control-nhấp chuột trong Elements bảng điều khiển và chọn Edit as HTML có lẽ là cách tốt nhất để đi, nhưng bạn có thể cũng có trong giao diện điều khiển (vì tò mò, và không có nhu cầu về jQuery):

var child = document.createElement('div'); 
var parent = document.getElementByClassName('parent'); 
parent.appendChild(child); 

Cheers!