HTML / जावास्क्रिप्ट परिवर्तन div सामग्री

208

मेरे पास कुछ जावास्क्रिप्ट के साथ सरल 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>

स्निपेट का विस्तार करें

मैं सिर्फ "ए" या "बी" रेडियो बटनों में से एक के साथ डिव की सामग्री (यह आंतरिक एचटीएमएल) को बदलने में सक्षम होना चाहता था, लेकिन डिव # सामग्री में जावास्क्रिप्ट विशेषता "मूल्य" नहीं है, इसलिए मैं पूछ रहा हूं कि यह कैसे हो सकता है सामाप्त करो।

javascript html

— लूटना
स्रोत

418

यह मानते हुए कि आप jQuery या कुछ अन्य लाइब्रेरी का उपयोग नहीं कर रहे हैं, जो आपके लिए इस तरह की चीज़ को आसान बना देता है, आप बस तत्व की आंतरिक HTML संपत्ति का उपयोग कर सकते हैं।

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

— वाक्य-रचना के नियमों के अनुसार
स्रोत

6

एक साइड नोट पर, document.getElementById("content").innerText = "<b>bold text?</b>";अलग-अलग व्यवहार करेगा, और कभी-कभी काफी उपयोगी होगा,document.getElementById("content").innerHTML = "<b>bold text?</b>";

— इसहाक

24

कृपया innerHTMLबजाय उपयोग करें innerTextऔर textContentक्योंकि innerHTMLसभी ब्राउज़रों के लिए संगत है।

— मिन्ह ट्राईट

10

चेतावनी! के उपयोग innerHTMLकर सकते हैं आसानी से XSS कमजोरियों के लिए नेतृत्व जब मूल्य किसी अविश्वसनीय इनपुट से आता है। का उपयोग innerTextहमेशा सुरक्षा कारणों से करने की सिफारिश की जाती है और वर्तमान में यह सभी ब्राउज़रों द्वारा समर्थित है ( caniuse.com/#feat=innertext )

— Mirko Conti

क्या मैं

— Fayaz

24

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

— माइकल सांचेज़
स्रोत

इसके लिए धन्यवाद, प्रतिस्थापन_ html का उपयोग करने की कोशिश कर रहा था, लेकिन यह मेरे मुद्दे को ठीक करने के लिए लग रहा था। कोई विचार क्यों?

— टॉल पॉल

यह jQuery का समाधान है।

— Ivo

14

divजिस सामग्री को आप बदलना चाहते हैं , उसकी आईडी प्राप्त करें, फिर नीचे दिए गए पाठ को असाइन करें:

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

— डैनियल Mbeyah
स्रोत

2

Stackoverflow में आपका स्वागत है! जब आप अपने उत्तर में कोड लिखते हैं तो थोड़ी सी व्याख्या प्रदान करना कोड की तुलना में कहीं अधिक सहायक होता है।

— जॉर्ज नेतु

10

आप निम्न सहायक समारोह का उपयोग कर सकते हैं:

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

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

सीएसएस चयनकर्ता कहां #contentमान्य होना चाहिए

यहाँ काम कर रहा उदाहरण है ।

अतिरिक्त - आज (2018.07.01) मैंने jquery और शुद्ध js समाधानों के लिए गति तुलना की (Chrome 67.3.3396.99 (64-बिट) Mac पर उच्च सिएरा 10.13.3, सफारी 11.0.3 (13604.5.6), फ़ायरफ़ॉक्स 59.0.2) (64-बिट)):

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

Jquery समाधान शुद्ध js समाधान की तुलना में धीमा था: फ़ायरफ़ॉक्स पर 69%, सफारी पर 61%, क्रोम पर 56%। शुद्ध js के लिए सबसे तेज़ ब्राउज़र 560 सेकंड के संचालन के साथ फ़ायरफ़ॉक्स था, दूसरा सफारी 426M था, और सबसे धीमा क्रोम 122M था।

तो विजेता शुद्ध js और फ़ायरफ़ॉक्स हैं (क्रोम की तुलना में 3x तेज!)

आप इसे अपने मशीन में परीक्षण कर सकते हैं: https://jsperf.com/js-jquery-html-content-change

— कामिल कियॉलेजवस्की
स्रोत

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>

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

— क्लिस्टर Dmello
स्रोत

0

परिवर्तन पर क्लिक करें 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>

स्निपेट का विस्तार करें

— कामिल कियॉलेजवस्की
स्रोत