Hướng dẫn how to create div in javascript - cách tạo div trong javascript

Question

Trong tài liệu HTML, phương thức document.createElement() tạo phần tử HTML được chỉ định bởi tagname hoặc HTMLUnknownElement nếu tagname không được nhận ra.document.createElement() method creates the HTML element specified by tagName, or an HTMLUnknownElement if tagName isn't recognized.

Nội dung chính Show

Thông số
Giá trị trả về
Ví dụ cơ bản
Ví dụ thành phần web
Thông số kỹ thuật
Tính tương thích của trình duyệt web
Làm cách nào để tạo một div?
Làm thế nào để bạn tạo một phần tử div mới trong JavaScript?
Làm thế nào để bạn sử dụng div trong html?
Phụ lục trong JavaScript là gì?

Cú pháp

createElement(tagName)
createElement(tagName, options)

Thông số

tagName

Một chuỗi chỉ định loại phần tử sẽ được tạo. nodeName của phần tử được tạo được khởi tạo với giá trị của tagname. Không sử dụng tên đủ điều kiện (như "HTML: A") với phương pháp này. Khi được gọi trên tài liệu HTML, createElement() chuyển đổi TagName thành CASED CASE trước khi tạo phần tử. Trong Firefox, Opera và Chrome,

DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="UTF-8" />
    <title>Working with elementstitle>
  head>
  <body>
    <div id="div1">The text above has been created dynamically.div>
  body>
html>

0 hoạt động như

DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="UTF-8" />
    <title>Working with elementstitle>
  head>
  <body>
    <div id="div1">The text above has been created dynamically.div>
  body>
html>

1.

DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="UTF-8" />
    <title>Working with elementstitle>
  head>
  <body>
    <div id="div1">The text above has been created dynamically.div>
  body>
html>

2 Tùy chọnOptional

Một đối tượng với các thuộc tính sau:

DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="UTF-8" />
    <title>Working with elementstitle>
  head>
  <body>
    <div id="div1">The text above has been created dynamically.div>
  body>
html>

3

Tên thẻ của một phần tử tùy chỉnh được xác định trước đó thông qua

DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="UTF-8" />
    <title>Working with elementstitle>
  head>
  <body>
    <div id="div1">The text above has been created dynamically.div>
  body>
html>

4. Xem ví dụ thành phần web để biết thêm chi tiết.

Giá trị trả về

DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="UTF-8" />
    <title>Working with elementstitle>
  head>
  <body>
    <div id="div1">The text above has been created dynamically.div>
  body>
html>

5 mới.

Lưu ý: Một htmlelement mới được trả về nếu tài liệu là một htmldocument, là trường hợp phổ biến nhất. Nếu không thì một yếu tố mới được trả về. A new HTMLElement is returned if the document is an HTMLDocument, which is the most common case. Otherwise a new Element is returned.

Ví dụ

Ví dụ cơ bản

Điều này tạo ra một

DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="UTF-8" />
    <title>Working with elementstitle>
  head>
  <body>
    <div id="div1">The text above has been created dynamically.div>
  body>
html>

6 mới và chèn nó trước phần tử với ID "

DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="UTF-8" />
    <title>Working with elementstitle>
  head>
  <body>
    <div id="div1">The text above has been created dynamically.div>
  body>
html>

7".

HTML

DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="UTF-8" />
    <title>Working with elementstitle>
  head>
  <body>
    <div id="div1">The text above has been created dynamically.div>
  body>
html>

JavaScript

document.body.onload = addElement;

function addElement() {
  // create a new div element
  const newDiv = document.createElement("div");

  // and give it some content
  const newContent = document.createTextNode("Hi there and greetings!");

  // add the text node to the newly created div
  newDiv.appendChild(newContent);

  // add the newly created element and its content into the DOM
  const currentDiv = document.getElementById("div1");
  document.body.insertBefore(newDiv, currentDiv);
}

Kết quả

Ví dụ thành phần web

Đoạn trích ví dụ sau đây được lấy từ ví dụ thành phần Danh sách mở rộng của chúng tôi (xem nó cũng trực tiếp). Trong trường hợp này, phần tử tùy chỉnh của chúng tôi mở rộng

DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="UTF-8" />
    <title>Working with elementstitle>
  head>
  <body>
    <div id="div1">The text above has been created dynamically.div>
  body>
html>

8, đại diện cho phần tử

DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="UTF-8" />
    <title>Working with elementstitle>
  head>
  <body>
    <div id="div1">The text above has been created dynamically.div>
  body>
html>

9.

// Create a class for the element
class ExpandingList extends HTMLUListElement {
  constructor() {
    // Always call super first in constructor
    super();

    // constructor definition left out for brevity
    // …
  }
}

// Define the new element
customElements.define("expanding-list", ExpandingList, { extends: "ul" });

Nếu chúng tôi muốn tạo một thể hiện của phần tử này theo chương trình, chúng tôi sẽ sử dụng một cuộc gọi dọc theo các dòng sau:

let expandingList = document.createElement("ul", { is: "expanding-list" });

Phần tử mới sẽ được cung cấp một thuộc tính

DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="UTF-8" />
    <title>Working with elementstitle>
  head>
  <body>
    <div id="div1">The text above has been created dynamically.div>
  body>
html>

3 có giá trị là tên thẻ của phần tử tùy chỉnh.

Lưu ý: Để có khả năng tương thích ngược với các phiên bản trước của đặc tả các phần tử tùy chỉnh, một số trình duyệt sẽ cho phép bạn truyền một chuỗi ở đây thay vì một đối tượng, trong đó giá trị của chuỗi là tên thẻ của phần tử tùy chỉnh. For backwards compatibility with previous versions of the Custom Elements specification, some browsers will allow you to pass a string here instead of an object, where the string's value is the custom element's tag name.

Thông số kỹ thuật

Sự chỉ rõ
DOM Standard # Ref-for-Dom-Domument-Createelement① # ref-for-dom-document-createelement①

Tính tương thích của trình duyệt web

Bảng BCD chỉ tải trong trình duyệt

Xem thêm

Làm cách nào để tạo một div?

Sử dụng Div trong CSS Art để tạo một hình vuông với thẻ div, trước tiên bạn cần xác định thẻ div trống và đính kèm thuộc tính lớp vào nó trong HTML. Trong CSS, chọn Div với thuộc tính lớp, sau đó đặt chiều cao và chiều rộng bằng nhau cho nó.define an empty div tag and attach a class attribute to it in the HTML. In the CSS, select the div with the class attribute, then set an equal height and width for it.

Làm thế nào để bạn tạo một phần tử div mới trong JavaScript?

Mã này tạo ra một yếu tố mới:..

const para = document.createEement ("p") ;.

const node = document.createTextNode ("Đây là một đoạn mới.") ;.

para.appendChild(node);.

const phần tử = tài liệu.getEuityByid ("Div1") ;.

yếu tố.....

const elmnt = document.getEuityById ("p1") ;.

elmnt.remove();.

const cha mẹ = tài liệu ..

Làm thế nào để bạn sử dụng div trong html?

Hướng dẫn về cách sử dụng thẻ Div trong HTML: Đặt con trỏ dấu chèn của bạn tại địa điểm trong mã HTML nơi bạn muốn tạo một khối nội dung mới.Nhập thẻ.Nhập phần còn lại của nội dung để chứa trong thẻ div.Để hoàn thành, sau đó nhập thẻ.Place your insertion mark cursor at the place in the HTML code where you want to create a new block of content. Type the

tag. Type the rest of the content to contain within the DIV tag. To finish, then type the

tag.

Phụ lục trong JavaScript là gì?

appendChild () Phương thức appendChild () của giao diện nút thêm một nút vào cuối danh sách con của một nút cha được chỉ định.Nếu đứa trẻ đã cho là một tham chiếu đến một nút hiện có trong tài liệu, appendChild () sẽ chuyển nó từ vị trí hiện tại của nó sang vị trí mới.adds a node to the end of the list of children of a specified parent node. If the given child is a reference to an existing node in the document, appendChild() moves it from its current position to the new position.

programming javascript appendChild Create element JavaScript Append js insertAfter javascript

Hướng dẫn how to create div in javascript - cách tạo div trong javascript

Cú pháp

Thông số

Giá trị trả về

Ví dụ

Ví dụ cơ bản

HTML

JavaScript

Kết quả

Ví dụ thành phần web

Thông số kỹ thuật

Tính tương thích của trình duyệt web

Xem thêm

Làm cách nào để tạo một div?

Làm thế nào để bạn tạo một phần tử div mới trong JavaScript?

Làm thế nào để bạn sử dụng div trong html?

Phụ lục trong JavaScript là gì?

Bài Viết Liên Quan

Quảng Cáo

Có thể bạn quan tâm

Toplist được quan tâm

Quảng cáo

Xem Nhiều

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội