Hướng dẫn how do you replace an element in html? - làm thế nào để bạn thay thế một phần tử trong html?

Question

Bởi vì bạn đang nói về sự thay thế của bạn là bất cứ điều gì, và cũng thay thế ở giữa trẻ em của một yếu tố, nó trở nên khó khăn hơn so với việc chỉ chèn một yếu tố đơn lẻ, hoặc trực tiếp loại bỏ và nối tiếp:

Nội dung chính Show

Cập nhật 2012/11/15
Làm thế nào để bạn thay thế văn bản trong html?
Làm thế nào để bạn sửa đổi một phần tử trong HTML?
Làm cách nào để thay thế một div?

function replaceTargetWith( targetID, html ){
  /// find our target
  var i, tmp, elm, last, target = document.getElementById(targetID);
  /// create a temporary div or tr (to support tds)
  tmp = document.createElement(html.indexOf('<td')!=-1?'tr':'div'));
  /// fill that div with our html, this generates our children
  tmp.innerHTML = html;
  /// step through the temporary div's children and insertBefore our target
  i = tmp.childNodes.length;
  /// the insertBefore method was more complicated than I first thought so I 
  /// have improved it. Have to be careful when dealing with child lists as  
  /// they are counted as live lists and so will update as and when you make
  /// changes. This is why it is best to work backwards when moving children 
  /// around, and why I'm assigning the elements I'm working with to `elm` 
  /// and `last`
  last = target;
  while(i--){
    target.parentNode.insertBefore((elm = tmp.childNodes[i]), last);
    last = elm;
  }
  /// remove the target.
  target.parentNode.removeChild(target);
}

Ví dụ sử dụng:

replaceTargetWith( 'idTABLE', 'I <b>can</b> be <div>anything</div>' );

demo:

http://jsfiddle.net/97H5Y/1/

Bằng cách sử dụng

replaceTargetWith( 'idTABLE', 'I <b>can</b> be <div>anything</div>' );

0 của Div tạm thời của chúng tôi, điều này sẽ tạo ra

replaceTargetWith( 'idTABLE', 'I <b>can</b> be <div>anything</div>' );

1 và

replaceTargetWith( 'idTABLE', 'I <b>can</b> be <div>anything</div>' );

2, chúng tôi cần phải chèn mà không có bất kỳ công việc khó khăn nào. Nhưng thay vì chèn chính div tạm thời - điều này sẽ cho chúng ta đánh dấu mà chúng ta không muốn - chúng ta chỉ có thể quét và chèn đó là trẻ em.

... Hoặc là hoặc tìm cách sử dụng jQuery và đó là phương thức

replaceTargetWith( 'idTABLE', 'I <b>can</b> be <div>anything</div>' );

3.

jQuery('#idTABLE').replaceWith('<blink>Why this tag??</blink>');

Cập nhật 2012/11/15

Như một phản hồi cho nhận xét của El 2002 ở trên:

Nó không phải lúc nào cũng có thể. Ví dụ: khi
replaceTargetWith( 'idTABLE', 'I <b>can</b> be <div>anything</div>' );
4 và đặt bên trong của nó là
replaceTargetWith( 'idTABLE', 'I <b>can</b> be <div>anything</div>' );
5, div này sẽ trở thành
replaceTargetWith( 'idTABLE', 'I <b>can</b> be <div>anything</div>' );
6 (JS vứt bỏ thẻ TD không phù hợp)

Vấn đề trên rõ ràng cũng phủ nhận giải pháp của tôi - tôi đã cập nhật mã của mình ở trên (ít nhất là đối với vấn đề

replaceTargetWith( 'idTABLE', 'I <b>can</b> be <div>anything</div>' );

7). Tuy nhiên, đối với một số HTML, điều này sẽ xảy ra bất kể bạn làm gì. Tất cả các tác nhân người dùng giải thích HTML thông qua các quy tắc phân tích cú pháp của riêng họ, nhưng gần như tất cả chúng sẽ cố gắng tự động sửa lỗi xấu. Cách duy nhất để đạt được chính xác những gì bạn đang nói (trong một số ví dụ của bạn) là đưa HTML ra khỏi DOM hoàn toàn và thao túng nó như một chuỗi. Đây sẽ là cách duy nhất để đạt được chuỗi đánh dấu với điều sau (jQuery cũng sẽ không gặp phải vấn đề này):

<table><tr>123 text<td>END</td></tr></table>

Nếu sau đó bạn đưa chuỗi này đưa nó vào DOM, tùy thuộc vào trình duyệt, bạn sẽ nhận được như sau:

123 text<table><tr><td>END</td></tr></table>

<table><tr><td>END</td></tr></table>

Câu hỏi duy nhất còn lại là tại sao bạn muốn đạt được HTML bị hỏng ngay từ đầu? :)

Làm thế nào để thay thế Div bằng một Div khác trong JavaScript ?.

Bản sao đầu tiên div mong muốn ..

Thứ hai trống rỗng div chính ..

Thứ ba nối bản sao vào Div chính ..

Xem thảo luận

Làm thế nào để thay thế Div bằng một Div khác trong JavaScript ?.

Bản sao đầu tiên div mong muốn ..

Thứ hai trống rỗng div chính ..

Thứ ba nối bản sao vào Div chính ..createElement(), createTextNode(), appendChild(), replaceChild() methods and childNodes property.

Chúng ta hãy thảo luận về các phương thức và thuộc tính này để thay thế một phần tử HTML sang một phần tử khác.

createdEuity (): Nó được sử dụng để tạo một nút phần tử với tên được chỉ định.Syntax: ________ 5 It is used to create an element node with the specified name.
Syntax:
```
var element = document.createElement("Element_name"); 
```
Trong ví dụ này, phần tử là thẻ H2 H2, vì vậy hãy viết
```
 var element=document.createElement("h2");
```
createdetextNode (): Phương thức được sử dụng để tạo nút văn bản.syntax: ________ 7 The method is used to create a text node.
Syntax:
```
 var txt = document.createTextNode("Some_Text");
```
appendChild (): Sau khi tạo nút văn bản, chúng ta phải nối nó vào phần tử bằng cách sử dụng phương thức appendChild (). After creating text node, we have to append it to the element by using appendChild() method.
Syntax:
```
 element.appendChild(Node_To_append);
```

Sau đây cho thấy mã làm việc về cách sử dụng các phương thức và thuộc tính này được thảo luận ở trên.

HTML

replaceTargetWith( 'idTABLE', 'I <b>can</b> be <div>anything</div>' );

8

replaceTargetWith( 'idTABLE', 'I <b>can</b> be <div>anything</div>' );

9

jQuery('#idTABLE').replaceWith('<blink>Why this tag??</blink>');

0

jQuery('#idTABLE').replaceWith('<blink>Why this tag??</blink>');

1

replaceTargetWith( 'idTABLE', 'I <b>can</b> be <div>anything</div>' );

9

jQuery('#idTABLE').replaceWith('<blink>Why this tag??</blink>');

3

jQuery('#idTABLE').replaceWith('<blink>Why this tag??</blink>');

1

jQuery('#idTABLE').replaceWith('<blink>Why this tag??</blink>');

5

replaceTargetWith( 'idTABLE', 'I <b>can</b> be <div>anything</div>' );

9

jQuery('#idTABLE').replaceWith('<blink>Why this tag??</blink>');

7

jQuery('#idTABLE').replaceWith('<blink>Why this tag??</blink>');

1

jQuery('#idTABLE').replaceWith('<blink>Why this tag??</blink>');

9

<table><tr>123 text<td>END</td></tr></table>

0

jQuery('#idTABLE').replaceWith('<blink>Why this tag??</blink>');

5

<table><tr>123 text<td>END</td></tr></table>

2

jQuery('#idTABLE').replaceWith('<blink>Why this tag??</blink>');

7

jQuery('#idTABLE').replaceWith('<blink>Why this tag??</blink>');

1

jQuery('#idTABLE').replaceWith('<blink>Why this tag??</blink>');

5

replaceTargetWith( 'idTABLE', 'I <b>can</b> be <div>anything</div>' );

9

<table><tr>123 text<td>END</td></tr></table>

7

jQuery('#idTABLE').replaceWith('<blink>Why this tag??</blink>');

1

jQuery('#idTABLE').replaceWith('<blink>Why this tag??</blink>');

9

123 text<table><tr><td>END</td></tr></table>

<table><tr><td>END</td></tr></table>

0

jQuery('#idTABLE').replaceWith('<blink>Why this tag??</blink>');

9

123 text<table><tr><td>END</td></tr></table>

<table><tr><td>END</td></tr></table>

2

123 text<table><tr><td>END</td></tr></table>

<table><tr><td>END</td></tr></table>

3

123 text<table><tr><td>END</td></tr></table>

<table><tr><td>END</td></tr></table>

4

jQuery('#idTABLE').replaceWith('<blink>Why this tag??</blink>');

9

123 text<table><tr><td>END</td></tr></table>

<table><tr><td>END</td></tr></table>

6

jQuery('#idTABLE').replaceWith('<blink>Why this tag??</blink>');

9

123 text<table><tr><td>END</td></tr></table>

<table><tr><td>END</td></tr></table>

8

jQuery('#idTABLE').replaceWith('<blink>Why this tag??</blink>');

5

<table><tr>123 text<td>END</td></tr></table>

2

<table><tr>123 text<td>END</td></tr></table>

7

jQuery('#idTABLE').replaceWith('<blink>Why this tag??</blink>');

1

<table><tr>123 text<td>END</td></tr></table>

2

jQuery('#idTABLE').replaceWith('<blink>Why this tag??</blink>');

3

jQuery('#idTABLE').replaceWith('<blink>Why this tag??</blink>');

1

<table><tr>123 text<td>END</td></tr></table>

2

jQuery('#idTABLE').replaceWith('<blink>Why this tag??</blink>');

0

jQuery('#idTABLE').replaceWith('<blink>Why this tag??</blink>');

1

Output:

Childnodes [Vị trí]: Thuộc tính này trả về một bộ sưu tập các nút con như một đối tượng Nodelist. Các nút được sắp xếp khi chúng xuất hiện trong mã nguồn và có thể được truy cập bằng số chỉ mục bắt đầu từ 0. This property returns a collection of child nodes as a NodeList object. The nodes are sorted as they appear in source code and can be accessed by index number starting from 0.

Thay thế (): Nó thay thế một nút con bằng nút mới. It replace a child node with new node.

old_Node.replaceChild(new_Node, old_node.childNodes[node_position]);

Ví dụ: Mã sau đây cho thấy cách thay thế phần tử bằng một mã khác. The following code shows how to replace element with another one.

HTML

replaceTargetWith( 'idTABLE', 'I <b>can</b> be <div>anything</div>' );

8

replaceTargetWith( 'idTABLE', 'I <b>can</b> be <div>anything</div>' );

9

jQuery('#idTABLE').replaceWith('<blink>Why this tag??</blink>');

0

jQuery('#idTABLE').replaceWith('<blink>Why this tag??</blink>');

1

replaceTargetWith( 'idTABLE', 'I <b>can</b> be <div>anything</div>' );

9

jQuery('#idTABLE').replaceWith('<blink>Why this tag??</blink>');

3

jQuery('#idTABLE').replaceWith('<blink>Why this tag??</blink>');

1

jQuery('#idTABLE').replaceWith('<blink>Why this tag??</blink>');

5

replaceTargetWith( 'idTABLE', 'I <b>can</b> be <div>anything</div>' );

9

 var element=document.createElement("h2");

8

 var element=document.createElement("h2");

9

 var txt = document.createTextNode("Some_Text");

0

 var txt = document.createTextNode("Some_Text");

1

jQuery('#idTABLE').replaceWith('<blink>Why this tag??</blink>');

1

jQuery('#idTABLE').replaceWith('<blink>Why this tag??</blink>');

9

replaceTargetWith( 'idTABLE', 'I <b>can</b> be <div>anything</div>' );

9

 var txt = document.createTextNode("Some_Text");

5

 var element=document.createElement("h2");

9

 var txt = document.createTextNode("Some_Text");

0

 var txt = document.createTextNode("Some_Text");

8

 var txt = document.createTextNode("Some_Text");

9__755521

jQuery('#idTABLE').replaceWith('<blink>Why this tag??</blink>');

9

replaceTargetWith( 'idTABLE', 'I <b>can</b> be <div>anything</div>' );

9

 element.appendChild(Node_To_append);

4

 element.appendChild(Node_To_append);

5

 var txt = document.createTextNode("Some_Text");

0

 element.appendChild(Node_To_append);

7

jQuery('#idTABLE').replaceWith('<blink>Why this tag??</blink>');

1

123 text<table><tr><td>END</td></tr></table>

<table><tr><td>END</td></tr></table>

3

old_Node.replaceChild(new_Node, old_node.childNodes[node_position]);

0

jQuery('#idTABLE').replaceWith('<blink>Why this tag??</blink>');

9

<table><tr>123 text<td>END</td></tr></table>

2

 element.appendChild(Node_To_append);

4

jQuery('#idTABLE').replaceWith('<blink>Why this tag??</blink>');

1

jQuery('#idTABLE').replaceWith('<blink>Why this tag??</blink>');

5

<table><tr>123 text<td>END</td></tr></table>

2

 var element=document.createElement("h2");

8

jQuery('#idTABLE').replaceWith('<blink>Why this tag??</blink>');

1

Các

jQuery('#idTABLE').replaceWith('<blink>Why this tag??</blink>');

5

replaceTargetWith( 'idTABLE', 'I <b>can</b> be <div>anything</div>' );

9

<table><tr>123 text<td>END</td></tr></table>

7

jQuery('#idTABLE').replaceWith('<blink>Why this tag??</blink>');

1

jQuery('#idTABLE').replaceWith('<blink>Why this tag??</blink>');

9

replaceTargetWith( 'idTABLE', 'I <b>can</b> be <div>anything</div>' );

13

123 text<table><tr><td>END</td></tr></table>

<table><tr><td>END</td></tr></table>

3

replaceTargetWith( 'idTABLE', 'I <b>can</b> be <div>anything</div>' );

15

123 text<table><tr><td>END</td></tr></table>

<table><tr><td>END</td></tr></table>

3

replaceTargetWith( 'idTABLE', 'I <b>can</b> be <div>anything</div>' );

17

123 text<table><tr><td>END</td></tr></table>

<table><tr><td>END</td></tr></table>

3

replaceTargetWith( 'idTABLE', 'I <b>can</b> be <div>anything</div>' );

19

123 text<table><tr><td>END</td></tr></table>

<table><tr><td>END</td></tr></table>

3

replaceTargetWith( 'idTABLE', 'I <b>can</b> be <div>anything</div>' );

21

123 text<table><tr><td>END</td></tr></table>

<table><tr><td>END</td></tr></table>

3

replaceTargetWith( 'idTABLE', 'I <b>can</b> be <div>anything</div>' );

23

123 text<table><tr><td>END</td></tr></table>

<table><tr><td>END</td></tr></table>

3

replaceTargetWith( 'idTABLE', 'I <b>can</b> be <div>anything</div>' );

25

123 text<table><tr><td>END</td></tr></table>

<table><tr><td>END</td></tr></table>

3

replaceTargetWith( 'idTABLE', 'I <b>can</b> be <div>anything</div>' );

27

123 text<table><tr><td>END</td></tr></table>

<table><tr><td>END</td></tr></table>

3

replaceTargetWith( 'idTABLE', 'I <b>can</b> be <div>anything</div>' );

29

123 text<table><tr><td>END</td></tr></table>

<table><tr><td>END</td></tr></table>

3

replaceTargetWith( 'idTABLE', 'I <b>can</b> be <div>anything</div>' );

31

123 text<table><tr><td>END</td></tr></table>

<table><tr><td>END</td></tr></table>

3

replaceTargetWith( 'idTABLE', 'I <b>can</b> be <div>anything</div>' );

33

123 text<table><tr><td>END</td></tr></table>

<table><tr><td>END</td></tr></table>

3

replaceTargetWith( 'idTABLE', 'I <b>can</b> be <div>anything</div>' );

35

123 text<table><tr><td>END</td></tr></table>

<table><tr><td>END</td></tr></table>

3

replaceTargetWith( 'idTABLE', 'I <b>can</b> be <div>anything</div>' );

37

jQuery('#idTABLE').replaceWith('<blink>Why this tag??</blink>');

9

replaceTargetWith( 'idTABLE', 'I <b>can</b> be <div>anything</div>' );

39

jQuery('#idTABLE').replaceWith('<blink>Why this tag??</blink>');

5

<table><tr>123 text<td>END</td></tr></table>

2

<table><tr>123 text<td>END</td></tr></table>

7

jQuery('#idTABLE').replaceWith('<blink>Why this tag??</blink>');

1

<table><tr>123 text<td>END</td></tr></table>

2

jQuery('#idTABLE').replaceWith('<blink>Why this tag??</blink>');

3

jQuery('#idTABLE').replaceWith('<blink>Why this tag??</blink>');

1

<table><tr>123 text<td>END</td></tr></table>

2

jQuery('#idTABLE').replaceWith('<blink>Why this tag??</blink>');

0

jQuery('#idTABLE').replaceWith('<blink>Why this tag??</blink>');

1

Output:

Làm thế nào để bạn thay thế văn bản trong html?

Tìm và thay thế văn bản trong tài liệu HTML..

Nhấp vào trong khung trình soạn thảo HTML để đảm bảo rằng đó là khung hoạt động ..

Trên menu chính, nhấp vào Chỉnh sửa, sau đó nhấp vào Tìm/Thay thế (hoặc nhấn Ctrl+F).....

Trong hộp tìm kiếm, nhập các từ để tìm kiếm hoặc thay đổi ..

Trong hộp thay thế, nhập các từ hoặc cụm từ thay thế ..

Làm thế nào để bạn sửa đổi một phần tử trong HTML?

Bạn có thể chỉnh sửa HTML-thẻ, thuộc tính và nội dung-trực tiếp trong khung HTML: Bấm đúp vào văn bản bạn muốn chỉnh sửa, thay đổi nó và nhấn Enter để xem các thay đổi được phản ánh ngay lập tức.Bạn có thể thêm bất kỳ HTML nào vào đây: Thay đổi thẻ của phần tử, thay đổi các phần tử hiện có hoặc thêm các phần tử mới.double-click the text you want to edit, change it, and press Enter to see the changes reflected immediately. You can add any HTML in here: changing the element's tag, changing existing elements, or adding new ones.