JavaScript thay đổi văn bản: Cách thay đổi văn bản bằng JavaScript – thay đổi văn bản thẻ p javascript

Văn bản thay đổi JavaScript là điều bắt buộc đối với các nhà phát triển JS. Chúng tôi đã chuẩn bị một hướng dẫn đầy đủ về cách thay đổi văn bản bằng JavaScript. Bắt đầu đọc để tìm hiểu làm thế nào.

Bạn đang xem : thay đổi văn bản thẻ p javascript

Cách thay đổi văn bản trong javascript JavaScript thay đổi văn bản là một khả năng dựa vào các thuộc tính innerHTML, innerText và textContent. Hơn nữa, học cách thay đổi văn bản trong JavaScript là một trong những điều cơ bản mà mọi lập trình viên JavaScript phải biết. Vì vậy, trong bài viết này, chúng tôi sẽ hướng dẫn bạn cách sử dụng chi tiết khả năng văn bản của bộ JavaScript .

Hãy tiếp tục đọc để biết cách triển khai những thay đổi đó trên trang web của bạn ngay lập tức.

HTML so với JavaScript

HTML, CSS và JavaScript được gọi là khối xây dựng của phát triển web và mỗi khối trong số chúng có một vai trò riêng biệt. Trong bài viết này, chúng tôi xem xét HTML và JavaScript , vì vậy, thật hợp lý khi chúng tôi cung cấp cho bạn một bài học giới thiệu về chúng. Đặc biệt vì bạn sẽ cần một số kiến ​​thức về cả hai để thay đổi văn bản trong JavaScript.

– HTML (Ngôn ngữ đánh dấu siêu văn bản)

Ngôn ngữ đánh dấu này cung cấp một cấu trúc cơ bản cho các trang web. Nó có các bộ hướng dẫn chi tiết bao gồm kiểu loại, trang điểm, v.v. Hãy coi HTML như một ngôn ngữ tạo ra các hướng dẫn chi tiết về định dạng, kiểu, kiểu và cách trang trí của các trang web trước khi kết xuất / in. HTML cho phép bạn cấu trúc các trang web của mình thành các phần tử cụ thể như tiêu đề, hình ảnh, đoạn văn, thanh điều hướng, v.v.

Vì vậy, mỗi trang web có nhiều thẻ HTML hiển thị loại nội dung trên trang. Mỗi loại nội dung được bao bọc hoặc bao quanh bởi các thẻ HTML.

Các thẻ HTML cho biết từng loại nội dung trên trang. Mỗi loại nội dung được bao quanh bởi các thẻ HTML.

Ví dụ: nó là một phần của đoạn văn khi bạn đọc nội dung trên một trang web. Trong khi mã hóa một trang web (từ đầu), nhà phát triển sẽ bắt đầu một trang bằng thẻ đoạn mở đầu: & lt; p & gt; .

Do đó, với HTML, bạn có thể dễ dàng thêm tiêu đề, tạo danh sách, định dạng đoạn văn, tạo ký tự đặc biệt, nhấn mạnh văn bản, chèn hình ảnh, tạo liên kết, kiểm soát một số kiểu, tạo bảng và hơn thế nữa. Nếu bạn cần thay đổi văn bản trong JavaScript , việc hỗ trợ HTML sẽ giúp mọi thứ dễ dàng hơn.

– JavaScript

JavaScript phức tạp hơn so với CSS hoặc HTML. Được phát hành vào năm 1995, tất cả các trình duyệt hiện đại ngày nay đều hỗ trợ JavaScript. Hầu hết tất cả các trang web đều sử dụng nó vì nó mạnh mẽ và cung cấp nhiều chức năng phức tạp hơn .

Ngôn ngữ dựa trên logic này thường được sử dụng để sửa đổi nội dung trang web và làm cho nội dung đó hoạt động khác biệt theo hành động của người dùng . Ví dụ: JS được sử dụng trong lời gọi hành động, hộp xác nhận và thêm danh tính mới vào thông tin hiện có.

Nói một cách đơn giản, JavaScript cho phép các nhà phát triển tạo các trang web tương tác . Vì vậy, các hành vi động trên một trang web là nhờ JavaScript. Cụ thể, JavaScript sẽ làm cho các trang HTML động và tương tác hơn.

Cách thay đổi văn bản trong JavaScript

Rất đơn giản để thực hiện các thay đổi trong văn bản trong một đoạn văn . Cách nhanh nhất sẽ là nhận tham chiếu đến phần tử và sau đó gán văn bản mới dưới dạng giá trị chuỗi cho phần tử innerHTML của phần tử đoạn văn.

Văn bản có nhiều tính năng, vì vậy có rất nhiều điều bạn có thể muốn thay đổi về nó . Ví dụ: bạn có thể muốn thay đổi màu phông chữ, kiểu phông chữ, kích thước phông chữ, v.v.

Xem Thêm  Tổng hợp vector trong C++ - & trong c++

Hãy tiếp tục và xem lại các phương pháp của chúng tôi để thay đổi văn bản trong JavaScript , vì vậy bạn có thể chọn một trong số chúng tùy thuộc vào những gì bạn muốn thực hiện với chính văn bản đó.

– Cách thức các chức năng của HTML JavaScript

Để xác định tập lệnh phía máy khách trong JavaScript, hãy sử dụng tập lệnh HTML & lt; & gt; thẻ . Tập lệnh & lt; & gt; phần tử sẽ chứa các câu lệnh script hoặc trỏ đến một tệp script bên ngoài thông qua thuộc tính src. Bạn có thể sử dụng JavaScript để xác thực biểu mẫu , thao tác trên hình ảnh và các thay đổi nội dung động tại đây.

Cách phổ biến nhất để chọn một phần tử HTML là sử dụng phương thức document.getElementById ().

Cú pháp:

document.getElementById (id) .innerHTML = new HTML

Hãy xem ví dụ bên dưới – nó thay đổi nội dung của & lt; p & gt; phần tử:

& lt; h2 & gt; JavaScript có thể Thay đổi HTML & lt; / h2 & gt;

& lt; p id = ”p1 ″ & gt; Hello World! & lt; / p & gt;

& lt; script & gt;

document.getElementById (“p1”). innerHTML = “Văn bản mới!”;

& lt; / script & gt;

& lt; p & gt; Đoạn văn trên đã được thay đổi bằng một tập lệnh. & lt; / p & gt;

Đầu ra:

Văn bản mới!

Tùy chọn Sử dụng để Chọn các Phần tử HTML

  • getElementById () – phương thức này cho phép bạn tìm nạp một phần tử có thuộc tính id phù hợp.
  • getElementsByName () – với phương thức này, bạn có thể chọn tất cả các phần tử có thuộc tính lớp phù hợp
  • getElementsByClassName () – phương thức này cho phép bạn thu thập tất cả các phần tử có thuộc tính lớp phù hợp
  • getElementsByTagName () – với getElementsByTagName (), bạn có thể chọn các phần tử có tên thẻ phù hợp, ví dụ: “li” cho & lt; li & gt; hoặc “body” cho & lt; body & gt ;.

Các chuyên gia JavaScript khuyên bạn nên sử dụng phương thức getElementById () vì nó rất cụ thể so với các phương thức khác. Lý tưởng nhất, phương thức getElementById () là phương thức duy nhất có thể truy xuất một phần tử dưới dạng đối tượng . Ba phương thức còn lại sẽ nhận các phần tử dưới dạng mảng ngay cả khi trang có một phần tử khớp duy nhất.

– Nội dung văn bản: Thay đổi nội dung văn bản của một phần tử

Nếu bạn xử lý nội dung HTML, thì thuộc tính textContent của một phần tử sử dụng JavaScript là cách dễ nhất để thay đổi nội dung. Các phần tử cần thay đổi có thể là & lt; p & gt ;, & lt; span & gt ;, a & lt; div & gt ;, hoặc bất kỳ thẻ nào khác. Bước đầu tiên là chọn phần tử cụ thể mà bạn muốn thay đổi. Hãy nhớ rằng tất cả phần tử HTML đều có thuộc tính textContent, cho phép bạn đặt văn bản cho phần tử đó.

Xem trang HTML:

& lt; body & gt;
& lt; h1 id = ”header” & gt; Xin chào, JavaScript! & lt; / h1 & gt;
& lt; p id = ”content” & gt; tâm trạng hôm nay thật buồn tẻ. & lt; / p & gt;
& lt; / body & gt;

– Ví dụ về Thay đổi & lt; h1 & gt; Yếu tố

Bây giờ, hãy thay đổi & lt; h1 & gt; thành “Hy vọng hôm nay trời sẽ mưa”.

Bạn có thể thay đổi văn bản bên trong & lt; h1 & gt; phần tử vào bất kỳ văn bản nào khác. Sử dụng bộ chọn phần tử trong JavaScript để chỉnh sửa văn bản dễ dàng hơn nhiều. Với bộ chọn phần tử của JavaScript, hãy chọn phần tử & lt; h1 & gt ;.

Nếu một phần tử thiếu phần tử id, hãy thêm phần tử đó trước. Tuy nhiên, bạn phải đảm bảo rằng hai hoặc nhiều phần tử không có giá trị thuộc tính id giống nhau. JavaScript sẽ trả về phần tử đầu tiên mà nó tìm thấy.

Trong ví dụ trên, thẻ & lt; h1 & gt; thẻ đã có một thuộc tính id. Bạn có thể sử dụng nó để lấy phần tử:

const header = document.getElementById (“tiêu đề”);

Bây giờ, hãy thay thế thuộc tính textContent như mã dưới đây:

header.textContent = ”Hy vọng hôm nay trời sẽ mưa”;

Không còn nghi ngờ gì nữa, đây là cách đơn giản nhất để thay đổi văn bản bên trong & lt; h1 & gt; nhãn. Hãy nhớ rằng, chỉ sử dụng thuộc tính textContent để thay đổi văn bản bên trong phần tử . Khi bạn thêm thẻ HTML bên trong văn bản, trang sẽ hiển thị thẻ đó. Ví dụ: đây là cách thêm văn bản kiểu nghiêng với & lt; i & gt; thẻ.

header.textContent = “& lt; i & gt; Hy vọng rằng hôm nay trời sẽ mưa & lt; / i & gt; ”;

Điều xảy ra ở đây là văn bản “& lt; i & gt; Hy vọng rằng hôm nay trời sẽ mưa & lt; / i & gt; ” được hiển thị trên trang HTML.

Nếu bạn phải thay đổi văn bản bằng JavaScript, bạn phải sử dụng thuộc tính textContent. Tuy nhiên, phương pháp này ghi đè hoàn toàn giá trị trước đó khi thay đổi giá trị thuộc tính. Như đã thấy ở trên, thuộc tính chỉ trả về văn bản bên trong phần tử. Bất kỳ HTML nào trong phần tử đều bị loại bỏ trước khi trả lại văn bản.

Điều đó khiến textContent không lý tưởng để thay thế văn bản bằng nội dung chứa HTML.

Thuộc tính innerHTML là một phương pháp khác để thay đổi văn bản trong JavaScript bên trong một phần tử. Trái ngược với textContent, thuộc tính innerHTML trả về chính xác mọi thứ bên trong phần tử, cùng với HTML. Điều đó ngụ ý rằng bạn có thể thêm các phần tử HTML khi thay thế văn bản.

– Thuộc tính innerText: Lấy nội dung bên trong tập lệnh

Thuộc tính innerText gần giống với thuộc tính textContent. Tuy nhiên, nó không trả về các phần tử ẩn.

Hơn nữa, cả textContent và innerText đều có thể hiển thị nội dung bên trong & lt; script & gt; hoặc & lt; style & gt; các thẻ. Điểm khác biệt duy nhất là innerText giữ nguyên định dạng trong khi textContent thì không .

– Cách thay đổi văn bản trong phần tử div bằng JavaScript

Đặt tính năng InternalHTML của Phần tử thành Chuỗi trống và Chèn một nút văn bản con mới vào Phần tử đó. Ngoài ra, có thể thay đổi văn bản JavaScript trong div bằng cách đặt thuộc tính innerHTML thành một chuỗi trống, thêm một nút văn bản mới và chèn nó vào div.

InnerHTML so với InnerText và TextContent thuộc tính: Cái nào nên sử dụng?

Tất cả các thuộc tính này đều có hiệu lực nếu bạn muốn thay đổi văn bản trong một phần tử . Tuy nhiên, nếu bạn cần thứ gì đó cụ thể, chúng hoạt động hơi khác một chút:

Thuộc tính innerHTML là lý tưởng nếu bạn muốn thay đổi hoặc trả về HTML bên trong một phần tử. Mặt khác, thuộc tính innerText là hoàn hảo nếu bạn muốn thay đổi hoặc trả lại văn bản trong một phần tử. Nhưng nếu bạn muốn thay đổi văn bản bên trong các phần tử ẩn, thì textContent là lựa chọn tốt nhất của bạn. < / p>

Vì vậy, tài sản để sử dụng tùy thuộc vào tình hình hiện tại.

Kết luận

Trong bài viết này về JavaScript thay đổi văn bản, chúng ta đã tìm hiểu:

  • Để thay đổi văn bản trong một phần tử, bạn có thể sử dụng ba thuộc tính – innerText, innerHTML và textContent
  • Khi bạn muốn trả lại mọi thứ bên trong phần tử cùng với các tính năng HTML, thuộc tính innerHTML hoạt động tốt nhất. innerText trả về tất cả văn bản, trừ đi các phần tử ẩn, trong khi textContent trả về tất cả văn bản cùng với một phần tử ẩn
  • Thuộc tính textContent là cách dễ nhất để thay đổi nội dung văn bản của các trang HTML
  • InternalText, innerHTML và textContent có thể được sử dụng để thay đổi các phần tử HTML khác như & lt; div & gt ;, a & lt; span & gt ;, hoặc a & lt; p & gt; thẻ
  • Một trình duyệt cung cấp bốn phương pháp khi bạn muốn thay đổi văn bản bên trong & lt; h1 & gt; yếu tố. Chúng là getElementById (), getElementsByClassName (), getElementsByName () và getElementsByTagName ()
  • Phương thức getElementById () được khuyên dùng nhiều nhất

Phương thức thay đổi văn bản trong Javascript Không còn nghi ngờ gì nữa, có nhiều cách bạn có thể thay đổi văn bản bằng JavaScript . Với hướng dẫn chuyên sâu này, giờ đây bạn có thể dễ dàng thao tác các ký tự bằng JS.

5/5 – (17 phiếu bầu)


Xem thêm những thông tin liên quan đến chủ đề thay đổi văn bản thẻ p javascript

JavaScript Tutorial For Beginners #34 – Changing Page Content

alt

  • Tác giả: The Net Ninja
  • Ngày đăng: 2015-09-06
  • Đánh giá: 4 ⭐ ( 8462 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Yo ninjas! In this JavaScript tutorial, I’ll be showing you how to change your web page content on the fly via the DOM. To do this, we must follow two steps:

    1. Reach into the page and grab a node / element
    2. Change the property of that note (either innerHTML or textContent).

    In this video, I do sometimes refer to these properties as methods – that is my mistake, although the concept is still very clear to see.

    If you have any questions, fire away :).

    SUBSCRIBE TO CHANNEL – https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg?sub_confirmation=1

    ========== JavaScript for Beginners Playlist ==========

    https://www.youtube.com/playlist?list=PL4cUxeGkcC9i9Ae2D9Ee1RvylH38dKuET

    ========== CSS for Beginners Playlist ==========

    https://www.youtube.com/playlist?list=PL4cUxeGkcC9gQeDH6xYhmO-db2mhoTSrT

    ========== HTML for Beginners Playlist ==========

    https://www.youtube.com/playlist?list=PL4cUxeGkcC9ibZ2TSBaGGNrgh4ZgYE6Cc

    ========== The Net Ninja ============

    For more front-end development tutorials & to black-belt your coding skills, head over to – https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg or http://thenetninja.co.uk

    ========== Social Links ==========

    Twitter – @TheNetNinja – https://twitter.com/thenetninjauk

DOM Là Gì? Thao Tác Với DOM Bằng Javascript

  • Tác giả: codelearn.io
  • Đánh giá: 3 ⭐ ( 4110 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Để thao tác được với các thẻ HTML thì phải thông qua một cơ chế ta gọi là DOM. Vậy DOM là gì và cách thao tác với DOM bằng JavaScript nhé!

Bài 6: DOM – Xử lý các phần tử HTML trong Javascript

  • Tác giả: goclamweb.com
  • Đánh giá: 4 ⭐ ( 1379 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Trong bài này, chúng ta sẽ tìm hiểu một phần rất quan trọng là DOM – xử lý các phần tử HTML trong Javascript. Qua bài học này, chúng ta sẽ biết các truy xuất, lấy dữ liệu, các thuộc tính từ các thẻ html, cũng như cách thêm, xóa các thẻ html.

Thay đổi kiểu văn bản

  • Tác giả: hiepsiit.com
  • Đánh giá: 4 ⭐ ( 5463 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Tổng hợp bài tập JavaScript có code mẫu

  • Tác giả: quantrimang.com
  • Đánh giá: 4 ⭐ ( 7738 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Phần đầu sẽ là khoảng 40 bài tập JavaScript có giải mẫu, phía cuối bài viết là những bài tập JavaScript tự giải, những bài khó có kèm theo hướng dẫn, giải thích cụ thể để các bạn không bị ngợp. Hy vọng chủ đề này sẽ hữu ích với các bạn đang tìm hiểu về ngôn ngữ lập trình JavaScript.

Thẻ tạo đoạn văn bản p trong HTML

  • Tác giả: hocjavascript.net
  • Đánh giá: 5 ⭐ ( 6952 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Chúng ta cần phải sử dụng thẻ tạo đoạn văn bản p trong HTML để tạo một đoạn văn. Một đoạn văn luôn bắt đầu trên một dòng mới và trình duyệt sẽ tự động thêm một

Thẻ định dạng đoạn văn bản trong HTML, thẻ

  • Tác giả: thuthuat.taimienphi.vn
  • Đánh giá: 3 ⭐ ( 2669 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: the dinh dang doan van ban trong html, Thẻ định dạng đoạn văn bản trong HTML, thẻ

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình

Xem Thêm  enum trong Java - tạo java lớp enum