Hướng dẫn inner html js - html js bên trong

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ội dung chính Show

Ví dụ ẩn/hiện comment form bằng cách sử dụng innerHTML
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
Mã mẫu 1
Mã mẫu 2
Xem thêm: getElementsByTagName trong JavaScript và cách lấy element theo thuộc tính tagname
Xem thêm: getElementsByTagName trong JavaScript và cách lấy element theo thuộc tính tagname

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>

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

<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>

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.

Bài viết này được đăng tại freetuts.net, không được copy dưới mọi hình thức.freetuts.net, không được copy dưới mọi hình thức.

Công dụng của innerHTML là giúp ta 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

<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>

3.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

<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>

1. Cú pháp innerHTML trong javascript

Cú pháp của innerHTML như sau:

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

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

Trong đó::

newContent chính là nội dung bạn muốn gán vào node
node chính là đối tượng cần lấy hoặc cần gán nội dung.

2. Cách dùng innerHTML trong javascript

Ví dụ innerHTML javascript:

Bài viết này được đăng tại [free tuts .net]

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.

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

<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>

4 ở dưới đây:

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

Trong Element

<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>

4 này chứa 2 Element

<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>

6, 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

<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>

7 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ụ

let element = document.getElementById('box');
element.innerHTML = " <p> Đi <strong> Hà Nội </strong> </p>";

Mã mẫu 1

Hãy cùng tìm hiểu cách thay đổi câu lệnh HTML chứa trong một Element chỉ định bằng thuộc tính innerHTML trong ví dụ 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à thay đổi câu lệnh HTML chứa trong Element</button>

<script>
function getElements(){
    let element = document.getElementById('box');
    element.innerHTML = "Đi Hà Nội";
}
</script>
</body>
</html>

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

<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>

7 sẽ được lấy thông qua phương thức getElementById. Sau đó khi sử dụng thuộc tính innerHTML để thiết lập một giá trị mới cho Element này thì toàn bộ Element con cháu ban đầu của nó đều bị xoá đi, và thay thế bằng lệnh HTML mới như sau:

Xem thêm: getElementsByTagName trong JavaScript và cách lấy element theo thuộc tính tagname

Mã mẫu 2

Một ví dụ khác khi chỉ định giá trị của value chứa các ký tự đặc biệt như thẻ tag của HTML, với cặp thẻ

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

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

3 dùng để ghi dòng văn bản, và cặp thẻ

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

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

4 dùng để in đậm văn bản.

<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>

Các thẻ HTML này sẽ được thêm vào như là ý nghĩa vốn có, và thực hiện chức năng của chúng.

Xem thêm: getElementsByTagName trong JavaScript và cách lấy element theo thuộc tính tagname

Mã mẫu 2

<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>

Một ví dụ khác khi chỉ định giá trị của value chứa các ký tự đặc biệt như thẻ tag của HTML, với cặp thẻ

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

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

3 dùng để ghi dòng văn bản, và cặp thẻ

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

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

4 dùng để in đậm văn bản.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.

Các thẻ HTML này sẽ được thêm vào như là ý nghĩa vốn có, và thực hiện chức năng của chúng.

Khi thẻ script được bao gồm trong câu HTML được thêm bằng innerHTML

<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>

Do có thể sử dụng innerHTML để thay đổi nội dung lệnh HMTL có trong một Element, nên chúng ta có thể thêm cả thẻ script vào Element bằng phương pháp này. Tuy nhiên cần lưu ý là các script này tuy được thêm vào bằng innerHTML, nhưng chúng sẽ không được thực thi sau khi thêm vào.

Xem thêm: getElementsByTagName trong JavaScript và cách lấy element theo thuộc tính tagname

Mã mẫu 2innerHTML 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é.

Một ví dụ khác khi chỉ định giá trị của value chứa các ký tự đặc biệt như thẻ tag của HTML, với cặp thẻ

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

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

3 dùng để ghi dòng văn bản, và cặp thẻ

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

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

4 dùng để in đậm văn bản.

Các thẻ HTML này sẽ được thêm vào như là ý nghĩa vốn có, và thực hiện chức năng của chúng.

Hướng dẫn inner html js - html js bên trong

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

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

Cú pháp

Ví dụ

Mã mẫu

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

Cú pháp

Mã mẫu 1

Mã mẫu 2

Xem thêm: getElementsByTagName trong JavaScript và cách lấy element theo thuộc tính tagname

Xem thêm: getElementsByTagName trong JavaScript và cách lấy element theo thuộc tính tagname

Bài Viết Liên Quan

MỚI CẬP NHẬP

Xem Nhiều

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội