자바 스크립트가있는 간단한 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";innerHTML보다는 innerText하고 textContent있기 때문에이 innerHTML모든 브라우저에 호환됩니다.
innerHTML값을 신뢰할 수없는 입력에서 비롯된 경우 의 사용으로 인해 XSS 취약성이 쉽게 발생할 수 있습니다. innerText보안상의 이유로 항상 사용하는 것이 좋으며 현재 모든 브라우저에서 지원됩니다 ( caniuse.com/#feat=innertext )
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.라이브 코드
변화의 onclick에 onClick="changeDivContent(this)"와 시도
function changeDivContent(btn) {
content.innerHTML = btn.value
}
document.getElementById("content").innerText = "<b>bold text?</b>";과 같이 다르게, 때로는 매우 유용하게 행동 할 것입니다document.getElementById("content").innerHTML = "<b>bold text?</b>";