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

Respostas:

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

insira a descrição da imagem aqui

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

Kamil Kiełczewski
fonte