HTML / Javascript thay đổi nội dung div

208

Tôi có mã HTML đơn giản với một số javascript, nó trông giống như:

<html>

<head>
  <script type="text/javascript">
    function changeDivContent() { // ...
    };
  </script>
</head>

<body>

  <input type="radio" name="radiobutton" value="A" onClick="changeDivContent()">
  <input type="radio" name="radiobutton" value="B" onClick="changeDivContent()">

  <div id="content"></div>

</body>

</html>

Mở rộng đoạn trích

Tôi chỉ muốn có thể thay đổi nội dung của div (đó là html bên trong) bằng cách chọn một trong các nút radio "A" hoặc "B", nhưng nội dung div # không có "giá trị" thuộc tính javascript, vì vậy tôi hỏi làm thế nào nó có thể được thực hiện.

javascript html

— Cướp
nguồn

418

Giả sử bạn không sử dụng jQuery hoặc một số thư viện khác giúp bạn thực hiện điều này dễ dàng hơn, bạn chỉ có thể sử dụng thuộc tính InternalHTML của phần tử.

document.getElementById("content").innerHTML = "whatever";

— Cú pháp
nguồn

6

Bên cạnh đó, document.getElementById("content").innerText = "<b>bold text?</b>";sẽ hành xử khác đi, và đôi khi khá hữu ích, đối vớidocument.getElementById("content").innerHTML = "<b>bold text?</b>";

— Isaac

24

Vui lòng sử dụng innerHTMLthay vì innerTextvà textContentvì innerHTMLtương thích với tất cả các trình duyệt.

— Minh Triết

10

Cảnh báo! việc sử dụng innerHTMLcó thể dễ dàng dẫn đến các lỗ hổng XSS khi giá trị đến từ một đầu vào không đáng tin cậy. Việc sử dụng innerTextluôn được khuyến nghị vì lý do bảo mật và hiện tại nó được hỗ trợ bởi tất cả các trình duyệt ( caniuse.com/#feat=innertext )

— Mirko Conti

Tôi có thể chỉ định một phần tử div khác thông qua InternalHTML, một cái gì đó như document.getEuityById ("foo"). InternalHTML = <div> ... </ div>

— Fayaz

24

$('#content').html('whatever');

— Michael Sanchez
nguồn

Cảm ơn vì điều này đã cố gắng sử dụng thay thế_html nhưng điều này dường như đã khắc phục vấn đề của tôi. Bất cứ ý tưởng tại sao?

— Cao Paul

Đây là giải pháp jQuery.

— Ivo

14

Lấy id của divnội dung mà bạn muốn thay đổi, sau đó gán văn bản như dưới đây:

  var myDiv = document.getElementById("divId");
  myDiv.innerHTML = "Content To Show";

— Daniel Mbeyah
nguồn

2

Chào mừng bạn đến với Stackoverflow! Cung cấp một chút giải thích khi bạn viết mã trong câu trả lời của bạn hữu ích hơn nhiều so với chỉ mã.

— George Netu

10

bạn có thể sử dụng chức năng trợ giúp sau:

function content(divSelector, value) {
    document.querySelector(divSelector).innerHTML = value;
}

content('#content',"whatever");

Trường hợp #contentphải là bộ chọn CSS hợp lệ

Dưới đây là ví dụ làm việc .

Bổ sung - hôm nay (2018/07/01) (64-bit)):

document.getElementById("content").innerHTML = "whatever"; // pure JS
$('#content').html('whatever');                            // jQuery

Giải pháp jquery chậm hơn giải pháp js thuần túy: 69% trên firefox, 61% trên safari, 56% trên chrome. Trình duyệt nhanh nhất cho js thuần là firefox với hoạt động 560M mỗi giây, thứ hai là safari 426M và chậm nhất là chrome 122M.

Vì vậy, người chiến thắng là js và firefox thuần túy (nhanh hơn gấp 3 lần so với chrome!)

Bạn có thể kiểm tra nó trong máy của mình: https://jsperf.com/js-jquery-html-content-change

— Kamil Kiełczewski
nguồn

2

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <input type="radio" name="radiobutton" value="A" onclick = "populateData(event)">
  <input type="radio" name="radiobutton" value="B" onclick = "populateData(event)">

    <div id="content"></div>
</body>
</html>

----------------- Mã- ------------

var targetDiv = document.getElementById('content');
    var htmlContent = '';

    function populateData(event){
      switch(event.target.value){
        case 'A':{
         htmlContent = 'Content for A';
          break;
        }
        case 'B':{
          htmlContent = "content for B";
break;
        }
      }
      targetDiv.innerHTML = htmlContent;
    }

Step1: on click of the radio button it calls function populate data, with event (an object that has event details such as name of the element, value etc..);

Step2: I extracted the value through event.target.value and then simple switch will give me freedom to add custom text.

Mã sống

https://jsbin.com/poreway/edit?html,js,output

— Thư ký Dmello
nguồn

0

thay đổi onClick onClick="changeDivContent(this)"và thử

function changeDivContent(btn) {
  content.innerHTML = btn.value
}

Hiển thị đoạn mã

function changeDivContent(btn) {
  content.innerHTML = btn.value
}

<input type="radio" name="radiobutton" value="A" onClick="changeDivContent(this)">
<input type="radio" name="radiobutton" value="B" onClick="changeDivContent(this)">

<div id="content"></div>

Mở rộng đoạn trích

— Kamil Kiełczewski
nguồn