replace code in HTML with JS [duplicate]

Question

I would like to replace an entire block of HTML in my page using JavaScript:

<html>
  <input type="number" id="totale">
  <br>
  <button onclick="primo();">esegui</button>
    <ul>
      <li id="figlio"></li>
      <li id="figlia"></li>
      <li id="genitori"></li>
    </ul>
<html>

I would like to replace the entire block of the <ul> element with a paragraph element (<p>). How can I do this?

I think the idea of StackOverflow is that you first look for answers and try something yourself. Don't just ask other people to write your code for you. You could start by let el = document.getElementsByTagname("ul") — Kokodoko
– Kokodoko, Commented Jan 6, 2018 at 12:43
What does the input, button and primo call have to do with your question? — trincot
– trincot, Commented Jan 6, 2018 at 12:44
Is this in response to a user-action, or automatically on page-load? If in response to a user-action then please supply a little information regarding that action in order that we can provide a full solution of use to yourself and, hopefully, future visitors. If it's on page-load then you should really change the HTML on the back-end (whether it's output from a CMS or a static HTML file) to avoid every client's browser having to perform the same action that could be undertaken once by you as the page author. — David Thomas
– David Thomas, Commented Jan 6, 2018 at 12:53

Ankit Agarwal · Accepted Answer · 2018-01-06 12:48:14Z

0

You can use this javascript to achieve this:

// get the ul element you want to replace with 
var ulTag = document.getElementsByTagName('ul')[0];
//create a p element
var paraObj=document.createElement("p");
//set the p text 
paraObj.innerHTML='This is a new paragraph';
//get the parent element of the <ul>
var ObjParent=ulTag.parentNode; 
//replace the <ul> with <p>
ObjParent.replaceChild(paraObj,ulTag);

<html>
    <input type="number" id="totale"><br>
          <button  onclick="primo();">esegui</button>
          <ul>
               <li id="figlio"></li>
               <li id="figlia"></li>
               <li id="genitori"></li>
          </ul>
<html>

answered Jan 6, 2018 at 12:48

Ankit Agarwal

30.8k5 gold badges41 silver badges63 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

replace code in HTML with JS [duplicate]

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related