HTML / Javascript เปลี่ยนเนื้อหา div

208

ฉันมีรหัส 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>

ขยายตัวอย่างข้อมูล

ฉันแค่อยากจะเปลี่ยนเนื้อหาของ div (เป็น html ภายใน) ด้วยการเลือกปุ่มตัวเลือก "A" หรือ "B" แต่ div # content ไม่มีค่า "แอตทริบิวต์" ของ javascript ดังนั้นฉันจึงถามว่าจะทำอย่างไร เสร็จแล้ว

javascript html

— ปล้น
แหล่งที่มา

418

สมมติว่าคุณไม่ได้ใช้ jQuery หรือห้องสมุดอื่น ๆ ที่ทำให้สิ่งนี้ง่ายขึ้นสำหรับคุณคุณสามารถใช้คุณสมบัติ innerHTML ขององค์ประกอบ

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

— วากยสัมพันธ์
แหล่งที่มา

6

ในหมายเหตุด้านdocument.getElementById("content").innerText = "<b>bold text?</b>";จะทำงานแตกต่างกันและบางครั้งค่อนข้างเป็นประโยชน์เพื่อdocument.getElementById("content").innerHTML = "<b>bold text?</b>";

— Isaac

24

กรุณาใช้innerHTMLแทนinnerTextและtextContentเพราะinnerHTMLเข้ากันได้กับเบราว์เซอร์ทั้งหมด

— Minh Triet

10

คำเตือน! การใช้งานinnerHTMLสามารถนำไปสู่ช่องโหว่ XSS ได้อย่างง่ายดายเมื่อค่ามาจากอินพุตที่ไม่น่าเชื่อถือ innerTextแนะนำให้ใช้เสมอเพื่อเหตุผลด้านความปลอดภัยและขณะนี้เบราว์เซอร์ทั้งหมดได้รับการสนับสนุน ( caniuse.com/#feat=innertext )

— Mirko Conti

ฉันสามารถกำหนดองค์ประกอบ div อื่น ๆ ผ่าน innerHTML ได้ไหมเช่น document.getElementById ("foo") innerHTML = <div> ... </div>

— Fayaz

24

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

— Michael Sanchez
แหล่งที่มา

ขอบคุณที่พยายามใช้ replace_html แต่ดูเหมือนว่าจะแก้ไขปัญหาของฉันได้ มีความคิดอะไรบ้าง

— Tall Paul

นี่คือโซลูชัน jQuery

— Ivo

14

รับรหัสของdivเนื้อหาที่คุณต้องการเปลี่ยนจากนั้นกำหนดข้อความดังต่อไปนี้:

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

— Daniel Mbeyah
แหล่งที่มา

2

ยินดีต้อนรับสู่ Stackoverflow! การให้คำอธิบายเล็กน้อยเมื่อคุณเขียนโค้ดในคำตอบของคุณมีประโยชน์มากกว่าแค่โค้ด

— George Netu

10

คุณสามารถใช้ฟังก์ชั่นตัวช่วยดังต่อไปนี้:

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

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

ที่ไหน#contentจะต้องเป็นตัวเลือก CSS ที่ถูกต้อง

นี่เป็นตัวอย่างการทำงาน

เพิ่มเติม - วันนี้ (2018.07.01) ฉันทำการเปรียบเทียบความเร็วสำหรับ jquery และ pure js solutions (MacOs High Sierra 10.13.3 บน Chrome 67.0.3396.99 (64-bit), 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% สำหรับ firefox, 61% สำหรับ Safari, 56% สำหรับ chrome เบราว์เซอร์ที่เร็วที่สุดสำหรับ js บริสุทธิ์คือ firefox ด้วยการดำเนินงาน 560M ต่อวินาทีวินาทีที่สองคือ Safari 426M และช้าที่สุดคือ chrome 122M

ดังนั้นผู้ชนะคือ js และ firefox บริสุทธิ์ (เร็วกว่าโครเมียม 3 เท่า)

คุณสามารถทดสอบในเครื่องของคุณ: https://jsperf.com/js-jquery-html-content-change

— Kamil Kiełczewski
แหล่งที่มา

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

— Clister Dmello
แหล่งที่มา

0

เปลี่ยน onClick เป็น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>

ขยายตัวอย่างข้อมูล

— Kamil Kiełczewski
แหล่งที่มา