HTML / Javascript змінити вміст div

208

У мене простий HTML-код з деяким javascript, він виглядає так:

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

Розгорніть фрагмент

Я просто хотів мати можливість змінити вміст div (це внутрішній html), вибравши одну з перемикачів "A" або "B", але вміст div # не має атрибута JavaScript "значення", тому я запитую, як це робити.

javascript html

— Роб
джерело

418

Якщо припустити, що ви не використовуєте jQuery чи якусь іншу бібліотеку, яка полегшує вам подібні речі, ви можете просто скористатися внутрішнім властивістю елемента HTMLHTML.

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

— Синтаксичний
джерело

6

Зі сторони, document.getElementById("content").innerText = "<b>bold text?</b>";буде поводитися по-різному, а іноді і досить корисно, доdocument.getElementById("content").innerHTML = "<b>bold text?</b>";

— Ісаак

24

Будь ласка , використовуйте innerHTMLзамість innerTextі textContentтому innerHTMLсумісний з усіма браузерами.

— Мінь Трієт

10

Увага! використання innerHTMLможе легко призвести до вразливості XSS, коли значення надходить з ненадійного вводу. Використання innerTextзавжди рекомендується з міркувань безпеки, і наразі його підтримують усі браузери ( caniuse.com/#feat=innertext )

— Mirko Conti

чи можу я призначити інший елемент div через innerHTML, щось на зразок document.getElementById ("foo"). innerHTML = <div> ... </div>

— Fayaz

24

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

— Майкл Санчес
джерело

Дякую за це, я намагався використовувати заміну_html, але це, здавалося, вирішило мою проблему. Будь-яка ідея чому?

— Високий Пол

Це рішення jQuery.

— Іво

14

Отримайте ідентифікатор div, вміст якого ви хочете змінити, а потім призначте текст, як показано нижче:

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

— Даніель Мбея
джерело

2

Ласкаво просимо до Stackoverflow! Дати трохи пояснень, коли ви пишете код у своїй відповіді набагато корисніше, ніж просто код.

— Джордж Нету

10

Ви можете використовувати наступну функцію помічника:

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

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

Там, де #contentповинен бути дійсний селектор CSS

Ось робочий приклад .

Додатково - сьогодні (2018.07.01) я зробив порівняння швидкості для jquery та чистих js рішень (MacOs High Sierra 10.13.3 на Chrome 67.0.3396.99 (64-розрядні), Safari 11.0.3 (13604.5.6), Firefox 59.0.2 (64-розрядні)):

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

Рішення jquery було повільніше, ніж чистий js розчин: 69% на firefox, 61% на сафарі, 56% на хром. Найшвидший браузер для чистого js був firefox з 560M операціями в секунду, другий - safari 426M, а найповільніший - chrome 122M.

Тож переможці - чисті js та firefox (у 3 рази швидше, ніж хром!)

Ви можете протестувати його на своїй машині: https://jsperf.com/js-jquery-html-content-change

— Каміль Кийчевський
джерело

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>

----------------- JS- код ------------

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.

Живий код

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

— Клістер Дмелло
джерело

0

змінити onClick onClick="changeDivContent(this)"і спробувати

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

Показати фрагмент коду

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>

Розгорніть фрагмент

— Каміль Кийчевський
джерело