자바스크립트로 div 콘텐츠를 변경하려면 어떻게 해야 하나요?
간단한 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>A, B 중 하나의 라디오 버튼을 선택하여 div의 콘텐츠(내부 html)를 변경할 수 있도록 하고 싶었을 뿐인데, div#content에는 javascript 속성 value가 없기 때문에 어떻게 하면 되는지 물어봅니다.
jQuery 또는 이러한 작업을 쉽게 하는 다른 라이브러리를 사용하지 않는 경우 요소의 내부만 사용할 수 있습니다.HTML 속성
document.getElementById("content").innerHTML = "whatever";
$('#content').html('whatever');
의 ID를 가져옵니다.div내용을 변경할 경우 다음과 같이 텍스트를 할당합니다.
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비트), Safari 11.0.3(13604.5.6), Firefox 59.0.2(64비트):
document.getElementById("content").innerHTML = "whatever"; // pure JS
$('#content').html('whatever'); // jQuery
jquery 솔루션은 firefox 69%, safari 61%, chrome 56%로 순수 js 솔루션보다 느렸습니다.순수 js에 대한 가장 빠른 브라우저는 초당 560M의 파이어폭스였고, 두 번째 브라우저는 사파리 426M, 가장 느린 브라우저는 크롬 122M이었다.
따라서 우승자는 순수 js와 firefox입니다(크롬보다 3배 빠름).
https://jsperf.com/js-jquery-html-content-change 에서 테스트 할 수 있습니다.
변경 내용클릭 대상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><!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
언급URL : https://stackoverflow.com/questions/2554149/how-can-i-change-div-content-with-javascript
'programing' 카테고리의 다른 글
| [첫 글자가 B로 시작]에서 모두 선택합니다. (0) | 2022.09.24 |
|---|---|
| 대소문자를 구분하지 않는 '입력' (0) | 2022.09.24 |
| MariaDB: 'AS'를 사용하지 않고 중복된 열 이름을 검색할 수 있습니까? (0) | 2022.09.24 |
| 데이터에서의 월과 연도의 갭 메우기 (0) | 2022.09.24 |
| AngularJS : $observe 메서드와 $watch 메서드의 차이 (0) | 2022.09.24 |