[javascript] HTML / 자바 스크립트 변경 div 콘텐츠

JAVASCRIPT / 글쓴이

자바 스크립트가있는 간단한 HTML 코드가 있습니다.

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

스 니펫 확장

“A”또는 “B”라디오 버튼 중 하나를 선택하여 div의 내용 (내부 HTML)을 변경하고 싶었지만 div # content에는 자바 스크립트 속성 “value”가 없으므로 어떻게 할 수 있는지 묻고 있습니다. 완료하십시오.

답변

jQuery 또는 다른 종류의 라이브러리를 사용하지 않는 것으로 가정하면 요소의 innerHTML 속성을 사용할 수 있습니다.

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

답변

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

답변

div내용을 변경하려는 사용자 의 ID를 가져온 다음 아래와 같이 텍스트를 지정하십시오. 

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

답변

다음과 같은 도우미 기능을 사용할 수 있습니다.

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

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

#content유효한 CSS 선택기가 있어야하는 곳

다음은 실제 예제 입니다.

추가 사항-오늘 (2018.07.01) jquery 및 순수 js 솔루션 (Chrome 67.0.3396.99 (64 비트)의 MacOs High Sierra 10.13.3, 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 %, 사파리 61 %, 크롬 56 %. 순수한 js에 대한 가장 빠른 브라우저는 초당 560M 작업의 파이어 폭스이고, 두 번째는 사파리 426M이며 가장 느린 브라우저는 크롬 122M입니다.

따라서 우승자는 순수한 js 및 firefox입니다 (크롬보다 3 배 빠름).

https://jsperf.com/js-jquery-html-content-change 컴퓨터에서 테스트 할 수 있습니다

답변

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

답변

변화의 onclick에 onClick="changeDivContent(this)"와 시도

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

코드 스 니펫 표시

답변