ล่าสุดการพัฒนาเว็บบทเรียน
×

JavaScript การอ้างอิง

ภาพรวม

JavaScript

JS เชือก JS จำนวน JS ผู้ประกอบการ JS งบ JS คณิตศาสตร์ JS วันที่ JS แถว JS บูลีน JS นิพจน์ทั่วไป JS สถานการณ์โดยรวม JS การแปลง

เบราว์เซอร์ BOM

Window Navigator Screen History Location

HTML DOM

DOM เอกสาร DOM องค์ประกอบ DOM แอตทริบิวต์ DOM เหตุการณ์ DOM รูปแบบ

HTML วัตถุ

<a> <abbr> <address> <area> <article> <aside> <audio> <b> <base> <bdo> <blockquote> <body> <br> <button> <canvas> <caption> <cite> <code> <col> <colgroup> <datalist> <dd> <del> <details> <dfn> <dialog> <div> <dl> <dt> <em> <embed> <fieldset> <figcaption> <figure> <footer> <form> <head> <header> <h1> - <h6> <hr> <html> <i> <iframe> <img> <ins> <input> button <input> checkbox <input> color <input> date <input> datetime <input> datetime-local <input> email <input> file <input> hidden <input> image <input> month <input> number <input> password <input> radio <input> range <input> reset <input> search <input> submit <input> text <input> time <input> url <input> week <kbd> <keygen> <label> <legend> <li> <link> <map> <mark> <menu> <menuitem> <meta> <meter> <nav> <object> <ol> <optgroup> <option> <output> <p> <param> <pre> <progress> <q> <s> <samp> <script> <section> <select> <small> <source> <span> <strong> <style> <sub> <summary> <sup> <table> <td> <th> <tr> <textarea> <time> <title> <track> <u> <ul> <var> <video>

วัตถุอื่น ๆ

CSSStyleDeclaration


 

HTML DOM replaceChild() Method

<ธาตุวัตถุ

ตัวอย่าง

แทนที่โหนดข้อความใน <li> องค์ประกอบในรายการกับโหนดข้อความใหม่:

// Create a new text node called "Water"
var textnode = document.createTextNode("Water");

// Get the first child node of an <ul> element
var item = document.getElementById("myList").childNodes[0];

// Replace the first child node of <ul> with the newly created text node
item.replaceChild(textnode, item.childNodes[0]);

// Note: This example replaces only the Text node "Coffee" with a Text node "Water"

ก่อนที่จะลบ:

  • Coffee
  • Tea
  • Milk

หลังจากลบ:

  • Water
  • Tea
  • Milk
ลองตัวเอง»

เพิ่มเติม "Try it Yourself" ตัวอย่างด้านล่าง


ความหมายและการใช้งาน

replaceChild() วิธีการแทนที่โหนดเด็กที่มีโหนดใหม่

โหนดใหม่อาจจะเป็นโหนดที่มีอยู่ในเอกสารหรือคุณสามารถสร้างโหนดใหม่

เคล็ดลับ: ใช้ removeChild() วิธีการที่จะลบโหนดเด็กจากองค์ประกอบ


สนับสนุนเบราว์เซอร์

วิธี
replaceChild() ใช่ ใช่ ใช่ ใช่ ใช่

วากยสัมพันธ์

ค่าพารามิเตอร์
พารามิเตอร์ ชนิด ลักษณะ
newnode Node object จำเป็นต้องใช้ โหนดวัตถุที่คุณต้องการแทรก
oldnode Node object จำเป็นต้องใช้ โหนดวัตถุที่คุณต้องการลบ

รายละเอียดทางเทคนิค

กลับค่า: วัตถุโหนดคิดเป็นโหนดแทนที่
DOM รุ่น ระดับแกนวัตถุ 1 โหนด

ตัวอย่าง

ตัวอย่างอื่น ๆ

ตัวอย่าง

แทนที่ <li> องค์ประกอบในรายการที่มีใหม่ <li> องค์ประกอบ:

// Create a new <li> element
var elmnt = document.createElement("li");

// Create a new text node called "Water"
var textnode = document.createTextNode("Water");

// Append the text node to <li>
elmnt.appendChild(textnode);

// Get the <ul> element with id="myList"
var item = document.getElementById("myList");

// Replace the first child node (<li> with index 0) in <ul> with the newly created <li> element
item.replaceChild(elmnt, item.childNodes[0]);

// Note: This example replaces the entire <li> element

ก่อนที่จะลบ:

  • Coffee
  • Tea
  • Milk

หลังจากลบ:

  • Water
  • Tea
  • Milk
ลองตัวเอง»

<ธาตุวัตถุ