Hướng dẫn innerhtml string interpolation - nội suy chuỗi bên trong

Question

Tôi đang cố gắng thay đổi bên trong của mỗi hàng trong một bảng theo tệp tải lên hiện tại. Tôi truy vấn các hàng với danh sách truy vấn từ các viewchildren. Sau đó, tôi đã cố gắng thay đổi bên trong trong chức năng theo tệp tải lên hiện tại. Điều này sẽ chứa nội suy chuỗi như dưới đây, nhưng nó sẽ chỉ hiển thị chuỗi đầu tiên được truyền, nhưng sẽ không lặp lại phép nội suy chuỗi. Tôi hy vọng sẽ làm điều đó như thế này.
within the function according to the current upload file. This will contain string interpolation as below, but it will just display the first string passed, but will not iterate the string interpolation. I expect to do it like this.

Nội dung chính Show

1. Cú pháp innerHTML trong javascript
2. Cách dùng innerHTML trong javascript
innerHTML trong JavaScript và cách lấy câu lệnh HTML chứa trong một Element
innerHTML trong JavaScript và cách thay đổi câu lệnh HTML chứa trong một Element
Ví dụ cụ thể, hãy xem cách sử dụng innerHTML để lấy các lệnh HMTL có trong Element <tbody class="upload-name-style"> <tr *ngFor="let item of files; let i = index"> <td> <strong>{{ item.name }}</strong> </td> <td> <strong>{{ item.size | filesize }}</strong> </td> <td #uploadingStatus>  {{ uploadStatus }} </td> </tr> </tbody> 6 ở dưới đây:
innerHTML trong JavaScript và cách thay đổi câu lệnh HTML chứa trong một Element
Xem thêm: getElementById trong JavaScript
Tổng kết

Và khi tải lên các tệp, người ta mong đợi thay đổi nội dung bằng phép nội suy chuỗi, như sau.

Nhưng nội suy chuỗi không hoạt động ở đây. Nó sẽ hiển thị dưới dạng văn bản đơn giản. Trong {{ProgressText}}, nó sẽ hiển thị tỷ lệ phần trăm tiến trình của tải lên. Sau khi hoàn thành tải lên, nó sẽ thay đổi như dưới đây.

chức năng của

upload.component.ts

   @ViewChildren('uploadingStatus') uploadList: QueryList<any>;
   ...........

   ngAfterViewInit() {
      console.log(this.uploadList);
   }
   ..............

    updateStatus(fileIndex: number) {
        let fileArray = this.uploadList.toArray();'innerHTML', `${this.progressText}`);
        let element = this.renderer.setProperty(
          fileArray[fileIndex].nativeElement,
          'innerHTML',
          `<span *ngIf="uploading"><i class="fas fa-spinner fa-pulse"></i> 
           {{progressText}}</span>`
        );
        console.log(element);
    }

upload.cpmponent.html

<tbody class="upload-name-style">
        <tr *ngFor="let item of files; let i = index">
          <td>
            <strong>{{ item.name }}</strong>
          </td>
          <td>
            <strong>{{ item.size | filesize }}</strong>
          </td>
          <td #uploadingStatus>
            <!-- <span *ngIf="uploading"
              ><i class="fas fa-spinner fa-pulse"></i
            ></span> -->
            {{ uploadStatus }}
          </td>
        </tr>
      </tbody>

Câu hỏi của tôi là? Tôi có thể áp dụng phép nội suy chuỗi bên trong trình kết xuất của innterhtml từ hàm như trong mã trên không? Nếu tôi đang làm sai ở đây, làm thế nào để làm điều đó?

Trong bài này chúng ta sẽ tìm hiểu thuộc tính innerHTML trong Javascript, đây là một thuộc tính có sẵn trong các node object.

Nội dung chính ShowShow

1. Cú pháp innerHTML trong javascript
2. Cách dùng innerHTML trong javascript
Ví dụ ẩn/hiện comment form bằng cách sử dụng innerHTML
innerHTML trong JavaScript và cách lấy câu lệnh HTML chứa trong một Element
innerHTML trong JavaScript và cách thay đổi câu lệnh HTML chứa trong một Element
Mã mẫu 1
Mã mẫu 2
Khi thẻ script được bao gồm trong câu HTML được thêm bằng innerHTML
Tổng kết

Trên đây Kiyoshi đã hướng dẫn bạn cách sử dụng innerHTML trong JavaScript để lấy và thay đổi câu lệnh HTML của một Element chỉ định rồi. Để nắm rõ nội dung bài học hơn, bạn hãy thực hành viết lại các ví dụ của ngày hôm nay nhé.freetuts.net, không được copy dưới mọi hình thức.

Và hãy cùng tìm hiểu những kiến thức sâu hơn về JavaScript trong các bài học tiếp theo.lấy nội dung hoặc thiết lập nội dung cho một node html nào đó. Nếu bạn sử dụng jQuery thì có phương thức

<tbody class="upload-name-style">
        <tr *ngFor="let item of files; let i = index">
          <td>
            <strong>{{ item.name }}</strong>
          </td>
          <td>
            <strong>{{ item.size | filesize }}</strong>
          </td>
          <td #uploadingStatus>
            <!-- <span *ngIf="uploading"
              ><i class="fas fa-spinner fa-pulse"></i
            ></span> -->
            {{ uploadStatus }}
          </td>
        </tr>
      </tbody>

5.

1. Cú pháp innerHTML trong javascript

2. Cách dùng innerHTML trong javascript

// lấy nội dung
let content = node.innerHTML;

// Gán nội dung
node.innerHTML = newContent;

Ví dụ ẩn/hiện comment form bằng cách sử dụng innerHTML :

innerHTML trong JavaScript và cách lấy câu lệnh HTML chứa trong một Element

innerHTML trong JavaScript và cách thay đổi câu lệnh HTML chứa trong một Element
Mã mẫu 1

2. Cách dùng innerHTML trong javascript

Ví dụ ẩn/hiện comment form bằng cách sử dụng innerHTML

Giả sử ta có đoạn code HTML như sau.

<div id="node">
    Học JS tại freetuts.net
</div>

Để lấy nội dung hoặc gán nội dung vào thẻ này thì ta sẽ sử dụng thuộc tính innerHTML.

let node = document.getElementById('node');
// lấy nội dung
let content = node.innerHTML;

// Gán nội dung
node.innerHTML = "Học JS Node tại freetuts.net";

Trên là những thông tin bạn cần biết về thuộc tính innerHTML trong javascript.

Thuộc tính innerHTML trong JavaScript có thể được sử dụng để viết html động trên trang web html. có thể được sử dụng để viết html động trên trang web html.

Nó được sử dụng chủ yếu trong các trang web để tạo ra html động như form đăng ký, form nhận xét, liên kết, v.v.

Ví dụ tạo biểu mẫu html khi người dùng nhấp vào button.

Trong ví dụ này, chúng ta tự động viết biểu mẫu html bên trong thẻ div có id="mylocation". Chúng ta xác định vị trí này bằng cách gọi phương thức document.getElementById().

<script type="text/javascript">
    function showcommentform() {
        var data = "Name:<input type='text' name='name'>"
                + "<br>Comment:<br><textarea rows='5' cols='80'></textarea>"
                + "<br><input type='submit' value='Post Comment'>";
        document.getElementById('mylocation').innerHTML = data;
    }
</script>
<form name="myForm">
  <input type="button" value="comment" onclick="showcommentform()">
  <div id="mylocation"></div>
</form>

<html>
<head>
<title>First JS</title>
<script>
    var flag = true;
    function commentform() {
        var cform = "<form action='Comment'>"
                + "Enter Name: <br><input type='text' name='name'/><br>"
                + "Enter Email: <br><input type='email' name='email'/><br>"
                + "Enter Comment: <br><textarea rows='5' cols='70'></textarea><br>"
                + "<input type='submit' value='Post Comment'/>"
                + "</form>";
        if (flag) {
            document.getElementById("mylocation").innerHTML = cform;
            flag = false;
        } else {
            document.getElementById("mylocation").innerHTML = "";
            flag = true;
        }
    }
</script>
</head>
<body>
  <button onclick="commentform()">Comment</button>
  <div id="mylocation"></div>
</body>
</html>

Hướng dẫn cách sử dụng innerHTML trong JavaScript. Bạn sẽ biết cách sử dụng thuộc tính innerHTML để lấy cũng như thiết lập các câu lệnh HTML chứa trong một Element chỉ định sau bài học này.innerHTML trong JavaScript. Bạn sẽ biết cách sử dụng thuộc tính innerHTML để lấy cũng như thiết lập các câu lệnh HTML chứa trong một Element chỉ định sau bài học này.

innerHTML trong JavaScript và cách lấy câu lệnh HTML chứa trong một Element

Cú pháp

innerHTML trong JavaScript là một thuộc tính của Element Object, có tác dụng lấy các câu lệnh HTML chứa trong một Element chỉ định. là một thuộc tính của Element Object, có tác dụng lấy các câu lệnh HTML chứa trong một Element chỉ định.

Cú pháp sử dụng thuộc tính innerHTML trong JavaScript để lấy các câu lệnh HTML như sau:

element.innerHTML

Giá trị trả về của thuộc tính innerHTML là các lệnh HTML, có nội dung y nguyên với cách chúng được ghi trong file HTML.

Ví dụ

Ví dụ cụ thể, hãy xem cách sử dụng innerHTML để lấy các lệnh HMTL có trong Element

<tbody class="upload-name-style">
        <tr *ngFor="let item of files; let i = index">
          <td>
            <strong>{{ item.name }}</strong>
          </td>
          <td>
            <strong>{{ item.size | filesize }}</strong>
          </td>
          <td #uploadingStatus>
            <!-- <span *ngIf="uploading"
              ><i class="fas fa-spinner fa-pulse"></i
            ></span> -->
            {{ uploadStatus }}
          </td>
        </tr>
      </tbody>

6 ở dưới đây:

<div>
  <p>Thành phố <br>Ninh Bình</p>
  <p>Shop mẹ và bé</p>
</div>

Trong Element

<tbody class="upload-name-style">
        <tr *ngFor="let item of files; let i = index">
          <td>
            <strong>{{ item.name }}</strong>
          </td>
          <td>
            <strong>{{ item.size | filesize }}</strong>
          </td>
          <td #uploadingStatus>
            <!-- <span *ngIf="uploading"
              ><i class="fas fa-spinner fa-pulse"></i
            ></span> -->
            {{ uploadStatus }}
          </td>
        </tr>
      </tbody>

6 này chứa 2 Element

<tbody class="upload-name-style">
        <tr *ngFor="let item of files; let i = index">
          <td>
            <strong>{{ item.name }}</strong>
          </td>
          <td>
            <strong>{{ item.size | filesize }}</strong>
          </td>
          <td #uploadingStatus>
            <!-- <span *ngIf="uploading"
              ><i class="fas fa-spinner fa-pulse"></i
            ></span> -->
            {{ uploadStatus }}
          </td>
        </tr>
      </tbody>

8, và chúng sẽ được lấy y nguyên với cách chúng được ghi trong file HTML như sau:

<p>Thành phố <br>Ninh Bình</p>
<p>Shop mẹ và bé</p>

Mã mẫu

Kết hợp với phân tích ở ví dụ trên, hãy cùng xem cách dùng innerHTML để lấy câu lệnh HTML chứa trong một Element chỉ định như sau:

<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<title>Ví dụ minh hoạ cách dùng innerHTML </title>
</head>
<body>

<p>Kế hoạch mua sắm</p>
<div id="box">
<p>Thành phố <br>Ninh Bình</p>
<p>Shop mẹ và bé</p>
</div>

<button onClick="getElements();">Click và lấy câu lệnh HMTL có trong Element</button>

<script>
function getElements(){
    let element = document.getElementById('box');
    console.log('-- start --');
    console.log(element.innerHTML);
    console.log('-- end --');
}
</script>
</body>
</html>

Trong mã HTML ở trên, sau khi click vào nút thì Element có thuộc tính

<tbody class="upload-name-style">
        <tr *ngFor="let item of files; let i = index">
          <td>
            <strong>{{ item.name }}</strong>
          </td>
          <td>
            <strong>{{ item.size | filesize }}</strong>
          </td>
          <td #uploadingStatus>
            <!-- <span *ngIf="uploading"
              ><i class="fas fa-spinner fa-pulse"></i
            ></span> -->
            {{ uploadStatus }}
          </td>
        </tr>
      </tbody>

9 sẽ được lấy thông qua phương thức getElementById. Sau đó bằng cách dùng thuộc tính innerHTML, chúng ta đã lấy các câu lệnh HTML chứa trong một Element này rồi xuất ra màn hình console như sau:

.

Xem thêm: getElementById trong JavaScript

innerHTML trong JavaScript và cách thay đổi câu lệnh HTML chứa trong một Element

Cú pháp

innerHTML trong JavaScript là một thuộc tính của Element Object, có tác dụng lấy các câu lệnh HTML chứa trong một Element chỉ định.

Cú pháp sử dụng thuộc tính innerHTML trong JavaScript để lấy các câu lệnh HTML như sau:

Giá trị trả về của thuộc tính innerHTML là các lệnh HTML, có nội dung y nguyên với cách chúng được ghi trong file HTML.toàn bộ các Element con cháu của nó sẽ bị xoá đi khỏi DOM.

Ví dụ

<tbody class="upload-name-style">
        <tr *ngFor="let item of files; let i = index">
          <td>
            <strong>{{ item.name }}</strong>
          </td>
          <td>
            <strong>{{ item.size | filesize }}</strong>
          </td>
          <td #uploadingStatus>
            <!-- <span *ngIf="uploading"
              ><i class="fas fa-spinner fa-pulse"></i
            ></span> -->
            {{ uploadStatus }}
          </td>
        </tr>
      </tbody>

0

Ví dụ cụ thể, hãy xem cách sử dụng innerHTML để lấy các lệnh HMTL có trong Element <tbody class="upload-name-style"> <tr ngFor="let item of files; let i = index"> <td> <strong>{{ item.name }}</strong> </td> <td> <strong>{{ item.size | filesize }}</strong> </td> <td #uploadingStatus>  {{ uploadStatus }} </td> </tr> </tbody> 6 ở dưới đây:

Trong Element

<tbody class="upload-name-style">
        <tr *ngFor="let item of files; let i = index">
          <td>
            <strong>{{ item.name }}</strong>
          </td>
          <td>
            <strong>{{ item.size | filesize }}</strong>
          </td>
          <td #uploadingStatus>
            <!-- <span *ngIf="uploading"
              ><i class="fas fa-spinner fa-pulse"></i
            ></span> -->
            {{ uploadStatus }}
          </td>
        </tr>
      </tbody>

6 này chứa 2 Element

<tbody class="upload-name-style">
        <tr *ngFor="let item of files; let i = index">
          <td>
            <strong>{{ item.name }}</strong>
          </td>
          <td>
            <strong>{{ item.size | filesize }}</strong>
          </td>
          <td #uploadingStatus>
            <!-- <span *ngIf="uploading"
              ><i class="fas fa-spinner fa-pulse"></i
            ></span> -->
            {{ uploadStatus }}
          </td>
        </tr>
      </tbody>

8, và chúng sẽ được lấy y nguyên với cách chúng được ghi trong file HTML như sau:

Mã mẫu

Kết hợp với phân tích ở ví dụ trên, hãy cùng xem cách dùng innerHTML để lấy câu lệnh HTML chứa trong một Element chỉ định như sau:

.

Xem thêm: getElementById trong JavaScript

innerHTML trong JavaScript và cách thay đổi câu lệnh HTML chứa trong một Element

Ngoài tác dụng lấy nội dung câu lệnh HTML thì chúng ta cũng có thể sử dụng innerHTML trong JavaScript để thay đổi câu lệnh HTML chứa trong một Element chỉ định, với cú pháp như sau:

<tbody class="upload-name-style">
        <tr *ngFor="let item of files; let i = index">
          <td>
            <strong>{{ item.name }}</strong>
          </td>
          <td>
            <strong>{{ item.size | filesize }}</strong>
          </td>
          <td #uploadingStatus>
            <!-- <span *ngIf="uploading"
              ><i class="fas fa-spinner fa-pulse"></i
            ></span> -->
            {{ uploadStatus }}
          </td>
        </tr>
      </tbody>

2

element.innerHTML =

// lấy nội dung
let content = node.innerHTML;

// Gán nội dung
node.innerHTML = newContent;

0

.

Xem thêm: getElementById trong JavaScript

innerHTML trong JavaScript và cách thay đổi câu lệnh HTML chứa trong một Element

<tbody class="upload-name-style">
        <tr *ngFor="let item of files; let i = index">
          <td>
            <strong>{{ item.name }}</strong>
          </td>
          <td>
            <strong>{{ item.size | filesize }}</strong>
          </td>
          <td #uploadingStatus>
            <!-- <span *ngIf="uploading"
              ><i class="fas fa-spinner fa-pulse"></i
            ></span> -->
            {{ uploadStatus }}
          </td>
        </tr>
      </tbody>

3

Ngoài tác dụng lấy nội dung câu lệnh HTML thì chúng ta cũng có thể sử dụng innerHTML trong JavaScript để thay đổi câu lệnh HTML chứa trong một Element chỉ định, với cú pháp như sau:không phải lo lắng chuyện các giá trị chứa thẻ script mà người dùng tuỳ ý nhập vào có thể bị thực thi dẫn đến bị hack web. Tuy nhiên không phải tất cả các cách thực thi mã script đều bị cấm, vì vậy bạn nên sử dụng tới thuộc tính textContent thay vì innerHTML khi thêm các giá trị không thể xác thực trước vào mã HTML, chẳng hạn như đầu vào của người dùng.

Xem thêm: textContent trong JavaScript

Ví dụ cụ thể, chúng ta dùng innerHTML để thêm câu lệnh HTML chứa thẻ script vào Element như sau:

<tbody class="upload-name-style">
        <tr *ngFor="let item of files; let i = index">
          <td>
            <strong>{{ item.name }}</strong>
          </td>
          <td>
            <strong>{{ item.size | filesize }}</strong>
          </td>
          <td #uploadingStatus>
            <!-- <span *ngIf="uploading"
              ><i class="fas fa-spinner fa-pulse"></i
            ></span> -->
            {{ uploadStatus }}
          </td>
        </tr>
      </tbody>

4

Với mã lệnh này, sau khi click nút, câu lệnh HTML mới chứa thẻ script sẽ được thay thế nội dung HTML cũ trong Element có

<tbody class="upload-name-style">
        <tr *ngFor="let item of files; let i = index">
          <td>
            <strong>{{ item.name }}</strong>
          </td>
          <td>
            <strong>{{ item.size | filesize }}</strong>
          </td>
          <td #uploadingStatus>
            <!-- <span *ngIf="uploading"
              ><i class="fas fa-spinner fa-pulse"></i
            ></span> -->
            {{ uploadStatus }}
          </td>
        </tr>
      </tbody>

9, tuy nhiên thì các script sẽ không tự thực thi mà chỉ được thêm vào mà thôi.

.

Tổng kết

Trên đây Kiyoshi đã hướng dẫn bạn cách sử dụng innerHTML trong JavaScript để lấy và thay đổi câu lệnh HTML của một Element chỉ định rồi. Để nắm rõ nội dung bài học hơn, bạn hãy thực hành viết lại các ví dụ của ngày hôm nay nhé.innerHTML trong JavaScript để lấy và thay đổi câu lệnh HTML của một Element chỉ định rồi. Để nắm rõ nội dung bài học hơn, bạn hãy thực hành viết lại các ví dụ của ngày hôm nay nhé.

Và hãy cùng tìm hiểu những kiến thức sâu hơn về JavaScript trong các bài học tiếp theo.

Viết bởi Kiyoshi. Đã đăng ký bản quyền tác giả tại <a title="Bạn được tự do chia sẻ bài viết nhưng phải để lại đường link bài viết từ laptrinhcanban.com. Bạn không được sử dụng tài liệu cho mục đích thương mại. Không được phép chỉnh sửa nội dung được phát hành trên website của chúng tôi" style="color:#fff;background-color:silver" rel="license noopener" target="_blank" href="https://creativecommons.org/licenses/by-nc-nd/4.0/">Creativecommons</a> và <a title="Bạn được tự do chia sẻ bài viết nhưng phải để lại đường link bài viết từ laptrinhcanban.com. Bạn không được sử dụng tài liệu cho mục đích thương mại. Không được phép chỉnh sửa nội dung được phát hành trên website của chúng tôi" style="color:#fff;background-color:silver" target="_blank" rel="noopener" href="https://www.dmca.com/Protection/Status.aspx?ID=1631afcd-7c4a-467d-8016-402c5073e5cd" class="dmca-badge">DMCA</a><script src="https://images.dmca.com/Badges/DMCABadgeHelper.min.js">Bài viết liên quanattributes trong JavaScript và cách lấy danh sách thuộc tính của ElementchildNodes trong JavaScript và cách lấy các Node conchildren trong JavaScript và cách lấy các Element concurrentScript trong JavaScript và cách lấy Element chứa mã script đang được xử lýDocumentFragment trong JavaScript và cách thêm đồng thời nhiều NodeCSS selectors trong JavaScriptDOM là gì trong JavaScriptfirstChild trong JavaScript và cách lấy Node con đầu tiênHãy chia sẻ và cùng lan tỏa kiến thức lập trình Nhật Bản tại Việt Nam! HOME>> học javascript - lập trình javascript cơ bản>>13. dom trong javascriptBài sauouterHTML trong JavaScript và cách lấy hoặc thay thế toàn bộ lệnh HTML của ElementBài tiếpremoveAttribute trong JavaScript và cách xoá thuộc tính của ElementBài viết mới nhấtXóa ký tự trong chuỗi PHP tháng 9 15, 2022Tìm ký tự trong chuỗi PHP tháng 9 15, 2022Đếm ký tự trong chuỗi PHP tháng 9 15, 2022Độ dài chuỗi trong PHP tháng 9 15, 2022Lấy ký tự trong chuỗi PHP tháng 9 15, 2022Xoá khoảng trắng trong chuỗi PHP tháng 9 15, 2022Lấy 2 số sau dấu phẩy trong PHP tháng 9 14, 2022Lấy số nguyên và lấy số dư trong PHP tháng 9 14, 2022ProfileTác giả : Kiyoshi (Chis Thanh)Kiyoshi là một cựu du học sinh tại Nhật Bản. Sau khi tốt nghiệp đại học Toyama năm 2017, Kiyoshi hiện đang làm BrSE tại Tokyo, Nhật Bản.