Hướng dẫn how do you replace innerhtml? - làm thế nào để bạn thay thế innerhtml?

Question

Tôi đang cố gắng thay thế HTML bằng cách sử dụng JavaScript bên trong.

Nội dung chính Show

Ngoại lệ
Ghi chú sử dụng
Đọc nội dung HTML của một phần tử
Thay thế nội dung của một phần tử
Nối HTML vào một phần tử
Cân nhắc về Bảo mật
Kết quả
Thông số kỹ thuật
Tính tương thích của trình duyệt web
Thuộc tính nào chúng ta sử dụng để thay thế InnerHTML?
Bạn có thể += innerHtml không?
Làm cách nào để thay đổi nội dung của một phần tử trong InsideHTML?
Internhtml có ghi đè không?

From:

aaaaaa/cat/bbbbbb

To:

<a href="http://www.google.com/cat/world">Helloworld</a>

Đây là mã của tôi

<html>
<head>
</head>
<body>
<p id="element1">aaaaaa/cat/bbbbbb</p>

<script language="javascript">
var strMessage1 = document.getElementById("element1") ;
strMessage1.innerHTML = strMessage1.innerHTML.replace( /aaaaaa./g,'<a href=\"http://www.google.com/') ;
strMessage1.innerHTML = strMessage1.innerHTML.replace( /.bbbbbb/g,'/world\">Helloworld</a>') ;
</script>
</body>
</html>

Khi tôi chạy mã này, nó biến mất siêu liên kết Helloworld. những gì tôi đang làm sai. Xin vui lòng giúp đỡ.

Cảm ơn bạn cho tất cả sự giúp đỡ của bạn.

Đã hỏi ngày 25 tháng 3 năm 2013 lúc 15:19Mar 25, 2013 at 15:19

0

Bạn nên chuỗi thay thế () lại với nhau thay vì gán kết quả và thay thế lại.

var strMessage1 = document.getElementById("element1") ;
strMessage1.innerHTML = strMessage1.innerHTML
                        .replace(/aaaaaa./g,'<a href=\"http://www.google.com/')
                        .replace(/.bbbbbb/g,'/world\">Helloworld</a>');

Xem bản demo.

Đã trả lời ngày 25 tháng 3 năm 2013 lúc 15:24Mar 25, 2013 at 15:24

AntonyantonyAntony

14.8k10 Huy hiệu vàng44 Huy hiệu bạc73 Huy hiệu đồng10 gold badges44 silver badges73 bronze badges

2

Bạn đang thay thế thẻ bắt đầu và sau đó đặt lại vào

<a href="http://www.google.com/cat/world">Helloworld</a>

7, vì vậy mã sẽ không hợp lệ. Tạo tất cả các thay thế trước khi bạn đặt mã trở lại trong phần tử:

var html = strMessage1.innerHTML;
html = html.replace( /aaaaaa./g,'<a href=\"http://www.google.com/');
html = html.replace( /.bbbbbb/g,'/world\">Helloworld</a>');
strMessage1.innerHTML = html;

Đã trả lời ngày 25 tháng 3 năm 2013 lúc 15:22Mar 25, 2013 at 15:22

GuffaguffaGuffa

675K108 Huy hiệu vàng723 Huy hiệu bạc998 Huy hiệu Đồng108 gold badges723 silver badges998 bronze badges

1

Thuộc tính

<a href="http://www.google.com/cat/world">Helloworld</a>

8

<a href="http://www.google.com/cat/world">Helloworld</a>

7 được hoặc đặt đánh dấu HTML hoặc XML có trong phần tử.
<a href="http://www.google.com/cat/world">Helloworld</a>
7 gets or sets the HTML or XML markup contained within the element.

Để chèn HTML vào tài liệu thay vì thay thế nội dung của một phần tử, hãy sử dụng phương thức

<html>
<head>
</head>
<body>
<p id="element1">aaaaaa/cat/bbbbbb</p>

<script language="javascript">
var strMessage1 = document.getElementById("element1") ;
strMessage1.innerHTML = strMessage1.innerHTML.replace( /aaaaaa./g,'<a href=\"http://www.google.com/') ;
strMessage1.innerHTML = strMessage1.innerHTML.replace( /.bbbbbb/g,'/world\">Helloworld</a>') ;
</script>
</body>
</html>

0.

Giá trị

Một chuỗi chứa tuần tự hóa HTML của con cháu của phần tử. Đặt giá trị của

<a href="http://www.google.com/cat/world">Helloworld</a>

7 loại bỏ tất cả các hậu duệ của phần tử và thay thế chúng bằng các nút được xây dựng bằng cách phân tích HTML được đưa ra trong chuỗi HTMLString.

Ngoại lệ

<html>
<head>
</head>
<body>
<p id="element1">aaaaaa/cat/bbbbbb</p>

<script language="javascript">
var strMessage1 = document.getElementById("element1") ;
strMessage1.innerHTML = strMessage1.innerHTML.replace( /aaaaaa./g,'<a href=\"http://www.google.com/') ;
strMessage1.innerHTML = strMessage1.innerHTML.replace( /.bbbbbb/g,'/world\">Helloworld</a>') ;
</script>
</body>
</html>

2

<html>
<head>
</head>
<body>
<p id="element1">aaaaaa/cat/bbbbbb</p>

<script language="javascript">
var strMessage1 = document.getElementById("element1") ;
strMessage1.innerHTML = strMessage1.innerHTML.replace( /aaaaaa./g,'<a href=\"http://www.google.com/') ;
strMessage1.innerHTML = strMessage1.innerHTML.replace( /.bbbbbb/g,'/world\">Helloworld</a>') ;
</script>
</body>
</html>

3

Ném nếu một nỗ lực được thực hiện để đặt giá trị của

<a href="http://www.google.com/cat/world">Helloworld</a>

7 bằng cách sử dụng một chuỗi không được hình thành đúng cách HTML.

<html>
<head>
</head>
<body>
<p id="element1">aaaaaa/cat/bbbbbb</p>

<script language="javascript">
var strMessage1 = document.getElementById("element1") ;
strMessage1.innerHTML = strMessage1.innerHTML.replace( /aaaaaa./g,'<a href=\"http://www.google.com/') ;
strMessage1.innerHTML = strMessage1.innerHTML.replace( /.bbbbbb/g,'/world\">Helloworld</a>') ;
</script>
</body>
</html>

5

<html>
<head>
</head>
<body>
<p id="element1">aaaaaa/cat/bbbbbb</p>

<script language="javascript">
var strMessage1 = document.getElementById("element1") ;
strMessage1.innerHTML = strMessage1.innerHTML.replace( /aaaaaa./g,'<a href=\"http://www.google.com/') ;
strMessage1.innerHTML = strMessage1.innerHTML.replace( /.bbbbbb/g,'/world\">Helloworld</a>') ;
</script>
</body>
</html>

3

Ném nếu một nỗ lực được thực hiện để chèn HTML vào một nút có cha mẹ là

<html>
<head>
</head>
<body>
<p id="element1">aaaaaa/cat/bbbbbb</p>

<script language="javascript">
var strMessage1 = document.getElementById("element1") ;
strMessage1.innerHTML = strMessage1.innerHTML.replace( /aaaaaa./g,'<a href=\"http://www.google.com/') ;
strMessage1.innerHTML = strMessage1.innerHTML.replace( /.bbbbbb/g,'/world\">Helloworld</a>') ;
</script>
</body>
</html>

7.

Ghi chú sử dụng

Thuộc tính

<a href="http://www.google.com/cat/world">Helloworld</a>

7 có thể được sử dụng để kiểm tra nguồn HTML hiện tại của trang, bao gồm mọi thay đổi đã được thực hiện kể từ khi trang ban đầu được tải.

Đọc nội dung HTML của một phần tử

Đọc

<a href="http://www.google.com/cat/world">Helloworld</a>

7 khiến tác nhân người dùng tuần tự hóa đoạn HTML hoặc XML bao gồm hậu duệ của phần tử. Chuỗi kết quả được trả về.

let contents = myElement.innerHTML;

Điều này cho phép bạn nhìn vào đánh dấu HTML của các nút nội dung của phần tử.

Lưu ý: Đoạn HTML hoặc XML được trả về được tạo dựa trên các nội dung hiện tại của phần tử, do đó, đánh dấu và định dạng của đoạn được trả về có thể không phù hợp với đánh dấu trang gốc. The returned HTML or XML fragment is generated based on the current contents of the element, so the markup and formatting of the returned fragment is likely not to match the original page markup.

Thay thế nội dung của một phần tử

Đặt giá trị của

<a href="http://www.google.com/cat/world">Helloworld</a>

7 cho phép bạn dễ dàng thay thế các nội dung hiện có của một phần tử bằng nội dung mới.

Lưu ý: Đây là rủi ro bảo mật nếu chuỗi được chèn có thể chứa nội dung độc hại có khả năng. Khi chèn dữ liệu do người dùng cung cấp, bạn nên luôn luôn cân nhắc sử dụng

var strMessage1 = document.getElementById("element1") ;
strMessage1.innerHTML = strMessage1.innerHTML
                        .replace(/aaaaaa./g,'<a href=\"http://www.google.com/')
                        .replace(/.bbbbbb/g,'/world\">Helloworld</a>');

1, để vệ sinh nội dung trước khi được chèn. This is a security risk if the string to be inserted might contain potentially malicious content. When inserting user-supplied data you should always consider using

var strMessage1 = document.getElementById("element1") ;
strMessage1.innerHTML = strMessage1.innerHTML
                        .replace(/aaaaaa./g,'<a href=\"http://www.google.com/')
                        .replace(/.bbbbbb/g,'/world\">Helloworld</a>');

1 instead, in order to sanitize the content before it is inserted.

Ví dụ: bạn có thể xóa toàn bộ nội dung của tài liệu bằng cách xóa nội dung của thuộc tính

var strMessage1 = document.getElementById("element1") ;
strMessage1.innerHTML = strMessage1.innerHTML
                        .replace(/aaaaaa./g,'<a href=\"http://www.google.com/')
                        .replace(/.bbbbbb/g,'/world\">Helloworld</a>');

2 của tài liệu:

document.body.innerHTML = "";

Ví dụ này tìm thấy sự đánh dấu HTML hiện tại của tài liệu và thay thế các ký tự

var strMessage1 = document.getElementById("element1") ;
strMessage1.innerHTML = strMessage1.innerHTML
                        .replace(/aaaaaa./g,'<a href=\"http://www.google.com/')
                        .replace(/.bbbbbb/g,'/world\">Helloworld</a>');

3 bằng thực thể HTML

var strMessage1 = document.getElementById("element1") ;
strMessage1.innerHTML = strMessage1.innerHTML
                        .replace(/aaaaaa./g,'<a href=\"http://www.google.com/')
                        .replace(/.bbbbbb/g,'/world\">Helloworld</a>');

4, do đó về cơ bản chuyển đổi HTML thành văn bản thô. Điều này sau đó được bọc trong một yếu tố

var strMessage1 = document.getElementById("element1") ;
strMessage1.innerHTML = strMessage1.innerHTML
                        .replace(/aaaaaa./g,'<a href=\"http://www.google.com/')
                        .replace(/.bbbbbb/g,'/world\">Helloworld</a>');

5. Sau đó, giá trị của

<a href="http://www.google.com/cat/world">Helloworld</a>

7 được thay đổi thành chuỗi mới này. Do đó, nội dung tài liệu được thay thế bằng hiển thị toàn bộ mã nguồn của trang.

document.documentElement.innerHTML = `<pre>${document.documentElement.innerHTML.replace(/</g,"&lt;")}</pre>`;

Chi tiết hoạt động

Chính xác thì điều gì xảy ra khi bạn đặt giá trị của

<a href="http://www.google.com/cat/world">Helloworld</a>

7? Làm như vậy khiến tác nhân người dùng tuân theo các bước sau:

Giá trị được chỉ định được phân tích cú pháp là HTML hoặc XML (dựa trên loại tài liệu), dẫn đến một đối tượng

var strMessage1 = document.getElementById("element1") ;
strMessage1.innerHTML = strMessage1.innerHTML
                        .replace(/aaaaaa./g,'<a href=\"http://www.google.com/')
                        .replace(/.bbbbbb/g,'/world\">Helloworld</a>');

8 đại diện cho bộ nút DOM mới cho các phần tử mới.

Nếu phần tử có nội dung được thay thế là phần tử

var strMessage1 = document.getElementById("element1") ;
strMessage1.innerHTML = strMessage1.innerHTML
                        .replace(/aaaaaa./g,'<a href=\"http://www.google.com/')
                        .replace(/.bbbbbb/g,'/world\">Helloworld</a>');

9, thì thuộc tính

var html = strMessage1.innerHTML;
html = html.replace( /aaaaaa./g,'<a href=\"http://www.google.com/');
html = html.replace( /.bbbbbb/g,'/world\">Helloworld</a>');
strMessage1.innerHTML = html;

1 của phần tử

var strMessage1 = document.getElementById("element1") ;
strMessage1.innerHTML = strMessage1.innerHTML
                        .replace(/aaaaaa./g,'<a href=\"http://www.google.com/')
                        .replace(/.bbbbbb/g,'/world\">Helloworld</a>');

9 được thay thế bằng

var strMessage1 = document.getElementById("element1") ;
strMessage1.innerHTML = strMessage1.innerHTML
                        .replace(/aaaaaa./g,'<a href=\"http://www.google.com/')
                        .replace(/.bbbbbb/g,'/world\">Helloworld</a>');

8 mới được tạo trong bước 1.

Đối với tất cả các phần tử khác, nội dung của phần tử được thay thế bằng các nút trong

var strMessage1 = document.getElementById("element1") ;
strMessage1.innerHTML = strMessage1.innerHTML
                        .replace(/aaaaaa./g,'<a href=\"http://www.google.com/')
                        .replace(/.bbbbbb/g,'/world\">Helloworld</a>');

8 mới.

Nối HTML vào một phần tử

Đặt giá trị của

<a href="http://www.google.com/cat/world">Helloworld</a>

7 cho phép bạn nối các nội dung mới vào một trong một phần tử hiện có.

Ví dụ: chúng ta có thể nối một mục danh sách mới (

var html = strMessage1.innerHTML;
html = html.replace( /aaaaaa./g,'<a href=\"http://www.google.com/');
html = html.replace( /.bbbbbb/g,'/world\">Helloworld</a>');
strMessage1.innerHTML = html;

5) vào danh sách hiện có (

var html = strMessage1.innerHTML;
html = html.replace( /aaaaaa./g,'<a href=\"http://www.google.com/');
html = html.replace( /.bbbbbb/g,'/world\">Helloworld</a>');
strMessage1.innerHTML = html;

6):

HTML

<ul id="list">
  <li><a href="#">Item 1</a></li>
  <li><a href="#">Item 2</a></li>
  <li><a href="#">Item 3</a></li>
</ul>

JavaScript

const list = document.getElementById("list");

list.innerHTML += `<li><a href="#">Item ${list.children.length + 1}</a></li>`;

Xin lưu ý rằng sử dụng

<a href="http://www.google.com/cat/world">Helloworld</a>

7 để nối các yếu tố HTML (ví dụ:

var html = strMessage1.innerHTML;
html = html.replace( /aaaaaa./g,'<a href=\"http://www.google.com/');
html = html.replace( /.bbbbbb/g,'/world\">Helloworld</a>');
strMessage1.innerHTML = html;

8) sẽ dẫn đến việc loại bỏ bất kỳ trình nghe sự kiện được đặt trước đó. Đó là, sau khi bạn nối bất kỳ phần tử HTML nào theo cách bạn sẽ không thể nghe người nghe sự kiện đã đặt trước đó.

Cân nhắc về Bảo mật

Không có gì lạ khi thấy

<a href="http://www.google.com/cat/world">Helloworld</a>

7 được sử dụng để chèn văn bản vào một trang web. Có khả năng để trở thành một vector tấn công trên một trang web, tạo ra rủi ro bảo mật tiềm năng.

<a href="http://www.google.com/cat/world">Helloworld</a>

0

Mặc dù điều này có thể trông giống như một cuộc tấn công kịch bản chéo trang, nhưng kết quả là vô hại. HTML chỉ định rằng thẻ

let contents = myElement.innerHTML;

0 được chèn bằng

<a href="http://www.google.com/cat/world">Helloworld</a>

7 không nên thực thi.

Tuy nhiên, có nhiều cách để thực hiện JavaScript mà không cần sử dụng các yếu tố

let contents = myElement.innerHTML;

0, do đó vẫn có rủi ro bảo mật bất cứ khi nào bạn sử dụng

<a href="http://www.google.com/cat/world">Helloworld</a>

7 để đặt các chuỗi mà bạn không kiểm soát được. Ví dụ:

<a href="http://www.google.com/cat/world">Helloworld</a>

1

Vì lý do đó, nên thay vì

<a href="http://www.google.com/cat/world">Helloworld</a>

7 bạn sử dụng:

var strMessage1 = document.getElementById("element1") ;
strMessage1.innerHTML = strMessage1.innerHTML
                        .replace(/aaaaaa./g,'<a href=\"http://www.google.com/')
                        .replace(/.bbbbbb/g,'/world\">Helloworld</a>');

1 để vệ sinh văn bản trước khi nó được chèn vào DOM.

```
let contents = myElement.innerHTML;
```
6 Khi chèn văn bản đơn giản, vì điều này chèn nó dưới dạng văn bản thô thay vì phân tích nó là HTML.

Ví dụ

Ví dụ này sử dụng

<a href="http://www.google.com/cat/world">Helloworld</a>

7 để tạo cơ chế để đăng nhập tin nhắn vào một hộp trên trang web.

JavaScript

<a href="http://www.google.com/cat/world">Helloworld</a>

2

Hàm

let contents = myElement.innerHTML;

8 tạo ra đầu ra nhật ký bằng cách nhận thời gian hiện tại từ đối tượng

let contents = myElement.innerHTML;

9 bằng cách sử dụng

document.body.innerHTML = "";

0 và xây dựng một chuỗi với dấu thời gian và văn bản tin nhắn. Sau đó, thông báo được gắn vào hộp với lớp

document.body.innerHTML = "";

1.

Chúng tôi thêm một phương thức thứ hai ghi lại thông tin về các sự kiện dựa trên

document.body.innerHTML = "";

2 (chẳng hạn như

document.body.innerHTML = "";

3,

document.body.innerHTML = "";

4 và

document.body.innerHTML = "";

5):

<a href="http://www.google.com/cat/world">Helloworld</a>

3

Sau đó, chúng tôi sử dụng điều này làm trình xử lý sự kiện cho một số sự kiện chuột trên hộp có chứa nhật ký của chúng tôi:

<a href="http://www.google.com/cat/world">Helloworld</a>

4

HTML

HTML khá đơn giản cho ví dụ của chúng tôi.

<a href="http://www.google.com/cat/world">Helloworld</a>

5

document.body.innerHTML = "";

6 với lớp

document.body.innerHTML = "";

7 chỉ là một thùng chứa cho mục đích bố trí, trình bày nội dung với một hộp xung quanh nó.

document.body.innerHTML = "";

6 có lớp là

document.body.innerHTML = "";

1 là bộ chứa cho chính văn bản nhật ký.

CSS

Các kiểu CSS sau đây nội dung ví dụ của chúng tôi.

<a href="http://www.google.com/cat/world">Helloworld</a>

6

Kết quả

Nội dung kết quả trông như thế này. Bạn có thể thấy đầu ra vào nhật ký bằng cách di chuyển chuột vào và ra khỏi hộp, nhấp vào nó, v.v.

Thông số kỹ thuật

Sự chỉ rõ
Dom phân tích cú pháp và tuần tự hóa # Dom-innerhtml-innerhtml # dom-innerhtml-innerhtml

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

Thuộc tính nào chúng ta sử dụng để thay thế InnerHTML?

Thuộc tính bên trong được sử dụng để viết nội dung HTML động trên tài liệu HTML.Khi bạn cần thay thế nội dung động bên trong, bạn có thể sử dụng hàm jQuery html () và cung cấp nội dung mới.jQuery html() function and provide the new content.

Bạn có thể += innerHtml không?

Lắp lại vào bên trong không được hỗ trợ: Thông thường, += được sử dụng để nối thêm trong JavaScript.Nhưng khi nối vào thẻ HTML bằng cách sử dụng bên trong, toàn bộ thẻ được sắp xếp lại.: Usually, += is used for appending in JavaScript. But on appending to an Html tag using innerHTML, the whole tag is re-parsed.