HTML / Javascript alterar o conteúdo div

208

Eu tenho um código HTML simples com algum javascript, parece com:

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

Expandir snippet

Eu só queria poder alterar o conteúdo da div (é html interno) selecionando um dos botões de opção "A" ou "B", mas o conteúdo da div # não tem o atributo javascript "value", por isso estou perguntando como pode ser feito.

javascript html

— Roubar
fonte

419

Supondo que você não esteja usando jQuery ou alguma outra biblioteca que facilite esse tipo de coisa, basta usar a propriedade innerHTML do elemento.

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

— Sintático
fonte

6

Em uma nota lateral, document.getElementById("content").innerText = "<b>bold text?</b>";irá se comportar de maneira diferente, e por vezes bastante útil, paradocument.getElementById("content").innerHTML = "<b>bold text?</b>";

— Isaac

24

Por favor, use em innerHTMLvez de innerTexte textContentporque innerHTMLé compatível com todos os navegadores.

— Minh Triet

10

Aviso! o uso de innerHTMLpode facilmente levar a vulnerabilidades XSS quando o valor vem de uma entrada não confiável. O uso de innerTexté sempre recomendável por razões de segurança e atualmente é suportado por todos os navegadores ( caniuse.com/#feat=innertext )

— Mirko Conti

Eu posso atribuir um outro elemento div através innerHTML, algo como document.getElementById ( "foo") innerHTML = <div> ... </ div>.

— Fayaz

24

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

— Michael Sanchez
fonte

Obrigado por tentar usar o replace_html, mas isso pareceu corrigir o meu problema. Alguma idéia do porquê?

— Tall Paul

Esta é a solução jQuery.

— Ivo

14

Obtenha o ID do divconteúdo cujo você deseja alterar e atribua o texto como abaixo:

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

— Daniel Mbeyah
fonte

2

Bem-vindo ao Stackoverflow! Fornecer um pouco de explicação ao escrever o código na sua resposta é muito mais útil do que apenas o código.

— precisa saber é o seguinte

10

você pode usar a seguinte função auxiliar:

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

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

Onde #contentdeve ser um seletor CSS válido

Aqui está um exemplo de trabalho .

Adicionalmente - hoje (2018.07.01) fiz a comparação de velocidade para soluções jquery e js pure (MacOs High Sierra 10.13.3 no Chrome 67.0.3396.99 (64 bits), Safari 11.0.3 (13604.5.6), Firefox 59.0.2 (64 bits)):

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

A solução jquery era mais lenta que a solução js pura: 69% no firefox, 61% no safari, 56% no chrome. O navegador mais rápido para js puros foi o firefox com operações de 560M por segundo, o segundo foi o safari 426M e o mais lento foi o Chrome 122M.

Portanto, os vencedores são puros js e firefox (3x mais rápido que o chrome!)

Você pode testá-lo em sua máquina: https://jsperf.com/js-jquery-html-content-change

— Kamil Kiełczewski
fonte

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>

----------------- Código 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.

Código ao vivo

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

— Clister Dmello
fonte

0

Clique em onClick="changeDivContent(this)"e tente

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

Mostrar snippet de código

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>

Expandir snippet

— Kamil Kiełczewski
fonte