how to remove and create new ul li tag in html using javascript

Question

Can anyone help me to get this work in d3js

My html tag are as below

<div id="source1"><ul><li>Source</li></ul></div>

i want to modify the <li>Source</li> with <li>some other text</li> by removing all the UL LI tags in DIV id source1 and creating new UL LI tags in div id source1

My code is here

d3.selectAll("ul").remove()

d3.selectAll("li").remove()

var test=document.getElementbyId('source1');
var ul=document.createElement('ul');
document.body.appendChild(test);
test.appendChild(ul);
var li=document.createElement('li');
ul.appendChild(li);
li.innerHTML="some other text";

What you really want? Do you want to remove `
Source
` the inner text which is in between
First you remove UL LI and then re-create UL LI. It is better to update LI only. — Raju Padhara, May 23 '14 at 08:25
@user3420762, i have tried to remove UL and LI Tags and get success but i can'r recreate my UL LI in
tag — Karthick Gunasekaran, May 23 '14 at 08:28

Madhurendra Sachan · Accepted Answer · 2014-05-23T08:58:26.067

0

here is code that should work :

var test=document.getElementById('source1');
var li=test.children[0].children[0];
li.innerHTML="some other text";

Instead of recreating element you can change text only.

edited May 23 '14 at 08:58

answered May 23 '14 at 08:28

Madhurendra Sachan

760
8
23

getElementbyId must be getElementById. – Raju Padhara May 23 '14 at 08:53
@user3420762 :D Typo :). Should i attach your fiddle ? or you want to write your answer ? – Madhurendra Sachan May 23 '14 at 09:00

score 0 · Answer 2 · answered May 23 '14 at 08:33

If your moto is to just edit the text in the li tag, you can go for "innerHtml" javascript method. This is the best method Eg.

<div id="source1"><ul><li id="liId">Source</li></ul></div>
 document.getElementById('liId').innerHTML="Some other text";

If you want to replace element(in your case, which is not required) you can use this,

<div id="source1">
<ul><li id="liId">Source</li></ul>
</div>

<script>
var para = document.createElement("li");
var node = document.createTextNode("Some other Text");
para.appendChild(node);

var parent = document.getElementById("source1");
var child = document.getElementById("liId");
parent.replaceChild(para,child);
 </script>

Hope this helps

how to remove and create new ul li tag in html using javascript

2 Answers2