এইচটিএমএল / জাভাস্ক্রিপ্ট পরিবর্তন ডিভ সামগ্রী

208

আমার কাছে কয়েকটি জাভাস্ক্রিপ্ট সহ সহজ এইচটিএমএল কোড রয়েছে, দেখতে এটি দেখতে:

<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 বা অন্য কোনও লাইব্রেরি ব্যবহার করছেন না যা এই ধরণের জিনিসটি আপনার পক্ষে সহজ করে তোলে আপনি কেবলমাত্র উপাদানটির অভ্যন্তরীণ এইচটিএমএল সম্পত্তি ব্যবহার করতে পারেন।

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

— অন্বিত
সূত্র

6

পার্শ্ব নোটে, document.getElementById("content").innerText = "bold text?";আলাদাভাবে আচরণ করবে এবং কখনও কখনও বেশ কার্যকরভাবে,document.getElementById("content").innerHTML = "bold text?";

— আইজ্যাক

24

innerHTMLপরিবর্তে innerTextএবং textContentকারণ innerHTMLসমস্ত ব্রাউজারের সাথে সামঞ্জস্যপূর্ণ ব্যবহার করুন ।

— মিন ট্রায়েট

10

সতর্কবাণী! innerHTMLঅবিশ্বাস্য ইনপুট থেকে যখন মান আসে তখন ব্যবহারের ফলে সহজেই এক্সএসএস দুর্বলতা দেখা দিতে পারে। innerTextসুরক্ষার কারণে সর্বদা ব্যবহারের পরামর্শ দেওয়া হয় এবং বর্তমানে এটি সমস্ত ব্রাউজার দ্বারা সমর্থিত ( caniuse.com/#feat=innertext )

— মিরকো কন্টি

আমি innerHTML, document.getElementById ( "foo বিন্যাস") ভালো কিছু মাধ্যমে একটি অন্য div উপাদান ধার্য করতে পারেন innerHTML = ... ।

— ফায়াজ

24

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

— মাইকেল সানচেজ
সূত্র

এর জন্য ধন্যবাদ রিপ্লেস_এইচটিএমএল ব্যবহার করার চেষ্টা করছিল তবে এটি আমার সমস্যাটি ঠিক করেছিল। কোন ধারণা কেন?

— লম্বা পল

এটি jQuery সমাধান।

— আইভো

14

আপনি divযার সামগ্রী পরিবর্তন করতে চান তার আইডি পান তারপরে নিচের মতো পাঠ্যটি বরাদ্দ করুন:

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

— ড্যানিয়েল এমবিয়াহ
সূত্র

2

স্ট্যাকওভারফ্লোতে স্বাগতম! আপনি যখন নিজের উত্তরে কোড লেখেন তখন কিছুটা ব্যাখ্যা প্রদান করা কোডের চেয়ে অনেক বেশি সহায়ক।

— জর্জ নেটু

10

আপনি নিম্নলিখিত সহায়ক ফাংশন ব্যবহার করতে পারেন:

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

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

যেখানে #contentঅবশ্যই বৈধ সিএসএস নির্বাচক হতে হবে

এখানে কাজ উদাহরণ ।

সংযোজন - আজ (2018.07.01) আমি জ্যাকারি এবং খাঁটি জেএস সমাধানগুলির জন্য গতি তুলনা করেছি (ক্রোম 67.0.3396.99 (64-বিট), সাফারি 11.0.3 (13604.5.6), ফায়ারফক্স 59.0.2 (64৪-বিট):

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

জ্যাকোয়ারি দ্রবণটি খাঁটি জেএস সমাধানের চেয়ে ধীর ছিল: ফায়ারফক্সে 69৯%, সাফারিতে %১%, ক্রোমে on 56%। খাঁটি জেএসের জন্য দ্রুততম ব্রাউজারটি ছিল প্রতি সেকেন্ডে 560 এম অপারেশন সহ ফায়ারফক্স, দ্বিতীয়টি ছিল সাফারি 426 এম, এবং সবচেয়ে ধীরতম ক্রোম 122 এম ছিল।

সুতরাং বিজয়ীরা খাঁটি জেএস এবং ফায়ারফক্স (ক্রোমের চেয়ে 3x দ্রুত!)

আপনি এটি আপনার মেশিনে পরীক্ষা করতে পারেন: https://jsperf.com/js-jquery-html-content- পরিবর্তন

— কামিল কিয়েসজেউস্কি
সূত্র

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>

----------------- জেএস- কোড ------------

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

— ক্লিস্ট ডেমেলো
সূত্র

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>

স্নিপেট প্রসারিত করুন

— কামিল কিয়েসজেউস্কি
সূত্র