జావాస్క్రిప్ట్ హెచ్టిఎంఎల్ డొమ్ ఎలమెంట్ (నోడ్)

నోడ్లను (హెచ్‌టిఎంఎల్ కొడుకులను) జోడించడం మరియు తొలగించడం

కొత్త హెచ్‌టిఎంఎల్ కొడుకును (నోడ్) సృష్టించండి

మీరు హెచ్‌టిఎంఎల్ డామ్ కు కొత్త కొడుకును జోడించడానికి, మీరు ముందుగా ఈ కొడుకును (కొడుకు నోడ్) సృష్టించవలసివుంది మరియు అది ప్రస్తుత కొడుకులకు జోడించండి.

ఉదాహరణ

<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另一个段落。</p>
</div>
<script>
var para = document.createElement("p");
var node = document.createTextNode("这是新文本。");
para.appendChild(node);
var element = document.getElementById("div1");
element.appendChild(para);
</script>

స్వయంగా ప్రయత్నించండి

ఉదాహరణ వివరణ

这段代码创建了一个新的 <p> ప్రాణి:

var para = document.createElement("p");

如需向 <p> 元素添加文本，则必须首先创建文本节点。这段代码创建了一个文本节点：

var node = document.createTextNode("ఈది ఒక కొత్త పరిచ్ఛేదం ఉంది.");

మీరు ప్రాణికి టెక్స్ట్ ను జోడించడానికి ఉపయోగించాలి అయితే మొదటగా టెక్స్ట్ నుండి ప్రాణి సృష్టించాలి. ఈ కోడు ఒక టెక్స్ట్ నుండి ప్రాణి సృష్టిస్తుంది: <p> ప్రాణికి టెక్స్ట్ ను జోడించడానికి ఉపయోగించాలి అయితే మొదటగా టెక్స్ట్ నుండి ప్రాణి సృష్టించాలి. ఈ కోడు ఒక టెక్స్ట్ నుండి ప్రాణి సృష్టిస్తుంది:

para.appendChild(node);

ప్రాణికి టెక్స్ట్ ను జోడించడానికి ఉపయోగించాలి అయితే మొదటగా టెక్స్ట్ నుండి ప్రాణి సృష్టించాలి. ఈ కోడు ఒక టెక్స్ట్ నుండి ప్రాణి సృష్టిస్తుంది:

చివరికి మీరు ప్రాణిలో కొత్త ప్రాణిని జోడించాలి.

var element = document.getElementById("div1");

ఈ కోడు ఒక ప్రాణిని కనుగొనుట చేస్తుంది:

ఈ కోడు ఈ ప్రాణిలో కొత్త ప్రాణిని జోడిస్తుంది:

element.appendChild(para);

కొత్త HTML ప్రాణి సృష్టించడం - insertBefore() మున్నతి ఉదాహరణలో లో ఉన్న appendChild()

మరియు పదినైది మార్గం ద్వారా కూడా ఉపయోగించవచ్చు: insertBefore() పద్ధతి:

ఉదాహరణ

<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另一个段落。</p>
</div>
<script>
var para = document.createElement("p");
var node = document.createTextNode("这是新文本。");
para.appendChild(node);
var element = document.getElementById("div1");
var child = document.getElementById("p1");
element.insertBefore(para, child);
</script>

స్వయంగా ప్రయత్నించండి

తాజా HTML ప్రాణిని తొలగించుట

మీరు ఒక HTML ప్రాణిని తొలగించడానికి ఉపయోగించాలి: remove() పద్ధతి:

ఉదాహరణ

<div>
  <p id="p1">This is a paragraph.</p>
  <p id="p2">This is another paragraph.</p>
</div>
<script>
const elmnt = document.getElementById("p1"); elmnt.remove();
</script>

స్వయంగా ప్రయత్నించండి

ఉదాహరణ వివరణ

ఈ HTML పత్రంలో ఒక ప్రాణి ఉంది మరియు రెండు పిల్లవిని కలిగి ఉంది (రెండు <p> ప్రాణి యొక్క <div> ప్రాణి:

<div>
  <p id="p1">This is a paragraph.</p>
  <p id="p2">This is another paragraph.</p>
</div>

తొలగించాలని కనుగొనుట అవసరమైన ప్రాణి కనుగొనుట:

const elmnt = document.getElementById("p1");

అప్పటికే ప్రాణి పై నిర్వహించండి: remove() పద్ధతి:

elmnt.remove();

గమనిక:remove() మెథడ్ పాత బ్రౌజర్స్ లో పని చేయకపోతే, ఎలా మార్చాలనే ఉదాహరణను చూడండి: removeChild()。

పిల్లవిని తొలగించుట

మరియు దాని కోసం లేదు remove() మెథడ్స్ బ్రౌజర్స్ కోసం మీరు ఒక ప్రాణిని తొలగించడానికి మీరు ప్రాణి ను కనుగొనవలసి ఉంటుంది:

ఉదాహరణ

<div id="div1">
  <p id="p1">This is a paragraph.</p>
  <p id="p2">This is another paragraph.</p>
</div>
<script>
const parent = document.getElementById("div1");
const child = document.getElementById("p1");
parent.removeChild(child);
</script>

స్వయంగా ప్రయత్నించండి

ఉదాహరణ వివరణ

ఈ HTML పత్రంలో ఒక ప్రాణి ఉంది మరియు రెండు పిల్లవిని కలిగి ఉంది (రెండు <p> ప్రాణి యొక్క <div> ప్రాణి:

<div id="div1">
  <p id="p1">This is a paragraph.</p>
  <p id="p2">This is another paragraph.</p>
</div>

కనుగొనుట: id="div1" ప్రాణి యొక్క:

const parent = document.getElementById("div1");

కనుగొనుట: id="p1" యొక్క <p> ప్రాణి:

const child = document.getElementById("p1");

ప్రాణి ను ప్రాణి నుండి తొలగించుట:

parent.removeChild(child);

ఇది ఒక సాధారణ పరిష్కారం: తొలగించవలసిన పిల్లవిని కనుగొని దాని ప్రాణి ను ఉపయోగించండి: parentNode అంశం ప్రాణి ను కనుగొనుట:

const child = document.getElementById("p1");
child.parentNode.removeChild(child);

హెచ్ఎంఎల్ ఎలిమెంట్ మార్చడం

మీరు ఎల్లప్పుడూ అంతర్భాగం మార్చడానికి ఉపయోగించండి replaceChild() పద్ధతి:

ఉదాహరణ

<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另一个段落。</p>
</div>
<script>
var para = document.createElement("p");
var node = document.createTextNode("这是新文本。");
para.appendChild(node);
var parent = document.getElementById("div1");
var child = document.getElementById("p1");
parent.replaceChild(para, child);
</script>

స్వయంగా ప్రయత్నించండి