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 # content нет атрибута javascript «value», поэтому я спрашиваю, как это можно быть сделано

javascript html

— обкрадывать
источник

419

Предполагая, что вы не используете jQuery или какую-либо другую библиотеку, которая облегчает вам подобные вещи, вы можете просто использовать свойство innerHTML элемента.

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 )

— Мирко Конти,

можно назначить другой Div элемент через innerHTML, что - то вроде document.getElementById ( "Foo") innerHTML = <DIV> ... </ DIV>.

— Fayaz

24

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

— Майкл Санчес
источник

Спасибо за это, пытался использовать replace_html, но это, похоже, решило мою проблему. Есть идеи почему?

— Высокий Пол

Это решение JQuery.

— Ivo

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 и pure 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% на Safari, 56% на Chrome. Самым быстрым браузером для чистого 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

— Clister Dmello
источник

0

изменить на Нажмите 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>

Развернуть фрагмент

— Камил Келчевски
источник