Hướng dẫn what does append mean in javascript - append nghĩa là gì trong javascript

Hướng dẫn what does append mean in javascript - append nghĩa là gì trong javascript

GIỚI THIỆU VỀ JAVASCRIPT

JavaScript append là một trong những phương thức hữu ích được sử dụng để chèn nội dung cần thiết ở vị trí cuối của các phần tử được chọn cụ thể. Phương thức append () rất hữu ích để tạo nội dung với sự trợ giúp của HTML, jQuery cũng như DOM. Người ta có thể chèn nội dung bằng cách chỉ định tham số ở cuối phần tử đã cho theo các phần tử phù hợp. Phương pháp này giúp người dùng tránh mã hóa cứng trong mã HTML thực tế của họ. Vì vậy, người ta có thể thêm mã yêu cầu trực tiếp ở cuối phần tử bằng cách sử dụng các hàm javascript append () JQuery giúp thêm các hàm hoặc nội dung nối tiếp theo chuỗi HTML, phần tử DOM, đối tượng jQuery hoặc nút văn bản, v.v.

Syntax:

  • Bây giờ sẽ thấy cú pháp để thêm phần tử vào mã bằng cách sử dụng mã JavaScript vào phần tử DIV bằng cách sử dụng các kỹ thuật mô hình đối tượng tài liệu (DOM). Vì vậy, sử dụng điều này, chúng ta có thể tạo trống có một số ID bên trong mã HTML, trong ID kịch bản này sẽ hữu ích để tìm nạp để nó sẽ thao tác với văn bản bên trong cho div này.
  • Dưới đây là cú pháp cho phương thức phụ lục JavaScript như sau:
document. getElementById("div_name").innerText +=  "data" ;
  • Chúng ta cũng có thể sử dụng jQuery, để nối thêm nội dung ở cuối các phần tử đã chọn, bằng cách sử dụng cú pháp sau:
$(selector).append(content , function(index.html))
  • Nội dung cú pháp trên là tham số cần thiết vào cú pháp, được sử dụng để chèn vào các thẻ HTML, các giá trị có thể cho đây là các phần tử HTML, đối tượng jQuery, các phần tử DOM, v.v. và hàm bao gồm ở đây là hàm (INDEX, HTML) được coi là một thuật ngữ tùy chọn, nó sẽ bao gồm một hàm sẽ trả về nội dung để chèn. Ở đây, hai giá trị đó xác định các ý nghĩa khác nhau như chỉ mục được sử dụng để trả về vị trí của phần tử trong khi HTML trả về HTML hiện tại của phần tử đã chọn.

JavaScript có hoạt động như thế nào trong HTML?

  • Như trước đó, chúng ta đã thấy rằng phương thức append () được sử dụng để thêm phần tử ở cuối danh sách phần tử, bây giờ chúng ta sẽ thấy thực sự nó sẽ hoạt động như thế nào với các loại của nó để làm điều đó.
  • Có hai cách trong JavaScript giúp nối mã HTML vào DIV. Hãy cùng xem cả hai người họ một cách chi tiết:

1. Sử dụng thuộc tính bên trong

Đây là loại đầu tiên mà chúng ta có thể nối phần tử bằng cách sử dụng thuộc tính bên trong, vì vậy trong khi xử lý trước tiên, chúng ta phải chọn phần tử trong đó thực sự chúng ta muốn nối lại mã. Sau đó, hãy thêm mã này trong định dạng mã kèm theo dưới dạng chuỗi cùng với toán tử += trên bên trong. Dưới đây là cú pháp để sử dụng bên trong như sau:

element.innerHTML += "HTML code"

Hoặc bạn cũng có thể sử dụng như:

element.innerHTML = element.innerHTML + "HTML Code"

2. Sử dụng phương thức insertAdjacenthtml ()

Nếu chúng tôi muốn nối mã HTML của chúng tôi vào div thì chúng tôi sẽ sử dụng phương thức insertAdjacenthtml (), vì vậy trong quá trình này, bạn phải chọn một phần tử bên trong div để chèn mã. Vì vậy, quá trình có thể được hoàn thành bằng cách sử dụng hai tham số như sau:

  • Vị trí sẽ xác định vị trí mà thực sự chúng tôi muốn thêm mã. Đây là những giá trị như Afterbegin, trước đó, sau đó, trước khi như thế.
  • Ngoài ra, hãy xem xét mã HTML mà bạn muốn chèn các trích dẫn vào định dạng kèm theo.

Cú pháp:

elementInsideDiv.insertAdjacentHTML('afterbegin');
  • Một điều thú vị hơn chúng ta có thể làm với phương thức trợ giúp của phương thức append () là xử lý phương thức appendChild () để nó nối một nút từ danh sách là đứa con cuối cùng của một nút. Vì vậy, chúng tôi sẽ thấy chi tiết cách sử dụng phương thức phụ lục () sẽ hoạt động trong javaScript với sự trợ giúp của ví dụ sau:
  • Giả sử chúng ta sẽ thêm nội dung ở cuối danh sách, thì nó sẽ giống như:
var child = document.createElement("li");
var demo = document.createTextNode("Example");
child.appendChild(demo);
document.getElementById("childdemo").appendChild(child);

Ví dụ về JavaScript

Sau đây là các ví dụ của JavaScript phụ thuộc:

Ví dụ 1

Trong ví dụ này, chúng tôi đang tạo mã đơn giản bằng nút Nhấp vào Nó sẽ hiển thị phần tử được thêm vào cuối cùng vào danh sách trên nút Nhấp như hiển thị bên dưới:

Code:

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#btnfortext").click(function(){
$("p").append(" <strong>Appended text Example</strong>.");
});
$("#btnforlist").click(function(){
$("ol").append("<li>Appended item list item</li>");
});
});
</script>
</head>
<body>
<p>Example of Appending item.</p>
<p>Appending list items in List.</p>
<ol>
<li>Example 1</li>
<li>Example 2</li>
<li>Example 3</li>
</ol>
<button id="btnfortext">Example of Appending Text</button>
<button id="btnforlist">Example of Appending list</button>
</body>
</html>

Output:

Hướng dẫn what does append mean in javascript - append nghĩa là gì trong javascript

Sau khi nhấp vào ví dụ về nút nối thêm nút

Hướng dẫn what does append mean in javascript - append nghĩa là gì trong javascript

Sau khi nhấp vào ví dụ về nút Danh sách nối tiếp

Hướng dẫn what does append mean in javascript - append nghĩa là gì trong javascript

Ví dụ #2

Trong ví dụ này, chúng tôi sẽ tạo danh sách các đối tượng, trong đó nó sẽ hiển thị mục được chèn cuối cùng thông qua phương thức nối JavaScript, mã cho nó như sau:

Code:

<!DOCTYPE html>
<html>
<head>
<title> JavaScript Append </title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="container">
<h2 style="text-align : center;">Preparing Subject List </h2>
<form>
<div class="form-group">
<label for="">Enter Subjects:</label>
<input id="subjectname" class="form-control" type="text" placeholder="Input Your Name Here">
</div>
<div class="form-group text-center">
<button id="my_button"class="btn btn-outline-success btn-lg"
type="button">
Add Subjects
</button>
</div>
</form>
<h3>List of Subjects as:</h3>
<div id="listDemo"></div>
</div>
<script>
function append_to_div(div_name, data){
document.getElementById(div_name).innerText += data;
}
document.getElementById("my_button")
.addEventListener('click', function() {
var user_name = document.getElementById("subjectname");
var value = user_name.value.trim();
if(!value)
alert("Please enter subject name!");
else
append_to_div("listDemo", value+"\n");
user_name.value = "";
});
</script>
</body>
</html>

Output:

Hướng dẫn what does append mean in javascript - append nghĩa là gì trong javascript

Sau khi thêm các đối tượng

Hướng dẫn what does append mean in javascript - append nghĩa là gì trong javascript

Ví dụ #3

Đây là ví dụ mà chúng tôi đang làm việc với phương thức JavaScript appendChild () để xử lý trình diễn mã. Mã cho điều này như sau:

Code:

<!DOCTYPE html>
<html>
<body>
<h4>JavaScript Append </h4>
<p>This is the example where we are working with P tag from HTML. So whenever we are going to click button so it will display text from P tag.</p>
<button onclick="myFunction()">Click Here</button>
<script>
function myFunction() {
var demo = document.createElement("P");
var txt = document.createTextNode("This is a the example of JavaScript Append method so, it will  print its created child node.");
demo.appendChild(txt);
document.body.appendChild(demo);
}
</script>
</body>
</html>

Output:

Hướng dẫn what does append mean in javascript - append nghĩa là gì trong javascript

Sau khi nhấp vào nút, nó sẽ hiển thị cho con được thêm vào thẻ làm đầu ra như sau:

Hướng dẫn what does append mean in javascript - append nghĩa là gì trong javascript

Sự kết luận

Vì vậy, từ tất cả các chi tiết trên, chúng tôi đã biết rằng phương thức JavaScript append () được sử dụng để thêm phần tử ở vị trí cuối của danh sách đã chọn. Có thể hữu ích cho các khía cạnh khác nhau như các yếu tố HTML, jQuery và Dom. Nó cũng có thể nối các phần tử vào mã bằng cách sử dụng mã jQuery. Người ta cũng có thể phụ lục () cho mục đích nối tiếp.

Bài viết đề xuất

Đây là một hướng dẫn để nối thêm JavaScript. Ở đây chúng tôi cũng thảo luận về cách thức nối tiếp JavaScript hoạt động trong HTML cùng với các ví dụ khác nhau và việc triển khai mã của nó. Bạn cũng có thể xem các bài viết sau để tìm hiểu thêm -

  1. Kế thừa trong JavaScript
  2. Sự kiện bàn phím JavaScript
  3. Con trỏ JavaScript
  4. Hộp thông báo JavaScript

Phụ lục có nghĩa là gì có nghĩa là mã hóa?

Trong lập trình máy tính, phụ lục là hoạt động để kết hợp các danh sách hoặc mảng được liên kết trong một số ngôn ngữ lập trình cấp cao.the operation for concatenating linked lists or arrays in some high-level programming languages.

Làm thế nào để bạn nối văn bản trong javascript?

Để nối văn bản vào một phần tử:..
Sử dụng tài liệu.Phương thức createdExtNode () để tạo nút văn bản ..
Sử dụng phương thức appendChild () để nối nút văn bản vào phần tử ..
Phương thức phụ lục sẽ thêm nút văn bản vào cuối danh sách trẻ em của phần tử ..

Phụ lục và dự bị trong JavaScript là gì?

Định nghĩa và sử dụng Phương thức Prepend () Chèn nội dung được chỉ định ở đầu các phần tử đã chọn.Mẹo: Để chèn nội dung ở cuối các phần tử đã chọn, hãy sử dụng phương thức append ().The prepend() method inserts specified content at the beginning of the selected elements. Tip: To insert content at the end of the selected elements, use the append() method.

Làm thế nào để bạn nối một danh sách trong JavaScript?

3 cách để nối vật phẩm vào mảng (đột biến)..
splice..
length..
concat..
spread..